Simple dashboard UI for inspiration.
A Pen by Mustafa Omar on CodePen.
neisdev
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body class="bg-cream text-charcoal min-h-screen font-sans leading-normal overflow-x-hidden lg:overflow-auto"> | |
| <main class="flex-1 md:p-0 lg:pt-8 lg:px-8 md:ml-24 flex flex-col"> | |
| <section class="bg-cream-lighter p-4 shadow"> | |
| <div class="md:flex"> | |
| <h2 class="md:w-1/3 uppercase tracking-wide text-sm sm:text-lg mb-6">Create New Location</h2> | |
| </div> | |
| <form> | |
| <div class="md:flex mb-8"> | |
| <div class="md:w-1/3"> | |
| <legend class="uppercase tracking-wide text-sm">Location</legend> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'dart:html'; | |
| import 'package:flutter/material.dart'; | |
| void main() { | |
| runApp(SlackApp()); | |
| } | |
| class SlackApp extends StatelessWidget { | |
| @override | |
| Widget build(BuildContext context) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'dart:html'; | |
| import 'package:flutter/material.dart'; | |
| void main() { | |
| runApp(SlackApp()); | |
| } | |
| class SlackApp extends StatelessWidget { | |
| @override | |
| Widget build(BuildContext context) { |
neisdev
/ admin-dashboard-with-materialize.markdown
Created
July 20, 2020 03:14
Admin Dashboard with Materialize
A Pen by Tirth Patel on CodePen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="font-sans antialiased h-screen flex"> | |
| <!-- Sidebar / channel list --> | |
| <div class="bg-blue-darkest flex-none w-24 p-6 hidden md:block"> | |
| <div class="mb-4"> | |
| <div class="bg-white opacity-75 h-12 w-12 flex items-center justify-center text-black text-2xl font-semibold rounded-lg mb-1"> | |
| <img src="https://slack-files2.s3-us-west-2.amazonaws.com/avatars/2016-03-24/29297563060_eef11070e05270f88b0b_44.png" class="rounded" /> | |
| </div> | |
| <div class="text-center text-white opacity-50 text-sm">⌘1</div> | |
| </div> | |
| <div class="mb-4"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body class="font-sans leading-none bg-grey-lighter mb-8"> | |
| <header class="bg-blue"> | |
| <div class="container mx-auto"> | |
| <div class="flex items-center py-2 mx-24"> | |
| <div class="w-1/2"> | |
| <div class="flex items-center"> | |
| <div class="cursor-pointer mr-1"> | |
| <?xml version="1.0" encoding="utf-8"?> | |
| <svg class="w-7 h-7 rounded-lg" viewbox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M1579 128q35 0 60 25t25 60v1366q0 35-25 60t-60 25h-391v-595h199l30-232h-229v-148q0-56 23.5-84t91.5-28l122-1v-207q-63-9-178-9-136 0-217.5 80t-81.5 226v171h-200v232h200v595h-735q-35 0-60-25t-25-60v-1366q0-35 25-60t60-25h1366z" fill="#fff"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body class="bg-gray-200 font-sans leading-normal tracking-normal"> | |
| <nav class="relative bg-white border-b-2 border-gray-300 text-gray-900"> | |
| <div class="container mx-auto flex justify-between"> | |
| <div class="relative block p-4 lg:p-6 text-xl text-teal-600 font-bold"> | |
| <a href="#" class="hover:text-teal-900">Logo</a> | |
| </div> | |
| <ul class="flex"> | |
| <!--Regular Link--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <header class="border-b md:flex md:items-center md:justify-between p-4 pb-0 shadow-lg md:pb-4"> | |
| <!-- Logo text or image --> | |
| <div class="flex items-center justify-between mb-4 md:mb-0"> | |
| <h1 class="leading-none text-2xl text-grey-darkest"> | |
| <a class="no-underline text-grey-darkest hover:text-black" href="#"> | |
| Site Title | |
| </a> | |
| </h1> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <header class="border-b md:flex md:items-center md:justify-between p-4 pb-0 shadow-lg md:pb-4"> | |
| <!-- Logo text or image --> | |
| <div class="flex items-center justify-between mb-4 md:mb-0"> | |
| <h1 class="leading-none text-2xl text-grey-darkest"> | |
| <a class="no-underline text-grey-darkest hover:text-black" href="#"> | |
| Site Title | |
| </a> | |
| </h1> |
OlderNewer