Instantly share code, notes, and snippets.
Created
April 16, 2023 09:01
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save izaakwalz/e4a4b830830450f237d3a6a1865e5a6b to your computer and use it in GitHub Desktop.
A tailwindcss simple sidebar
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
| <button data-drawer-target="default-sidebar" data-drawer-toggle="default-sidebar" aria-controls="default-sidebar" type="button" class="inline-flex items-center p-2 mt-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"> | |
| <span class="sr-only">Open sidebar</span> | |
| <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> | |
| <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path> | |
| </svg> | |
| </button> | |
| <aside id="default-sidebar" class="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0" aria-label="Sidebar"> | |
| <div class="h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800"> | |
| <ul class="space-y-2 font-medium"> | |
| <li> | |
| <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <svg aria-hidden="true" class="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg> | |
| <span class="ml-3">Dashboard</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <svg aria-hidden="true" class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg> | |
| <span class="flex-1 ml-3 whitespace-nowrap">Kanban</span> | |
| <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <svg aria-hidden="true" class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"></path><path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"></path></svg> | |
| <span class="flex-1 ml-3 whitespace-nowrap">Inbox</span> | |
| <span class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <svg aria-hidden="true" class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg> | |
| <span class="flex-1 ml-3 whitespace-nowrap">Users</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <svg aria-hidden="true" class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd"></path></svg> | |
| <span class="flex-1 ml-3 whitespace-nowrap">Products</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <svg aria-hidden="true" class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clip-rule="evenodd"></path></svg> | |
| <span class="flex-1 ml-3 whitespace-nowrap">Sign In</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <svg aria-hidden="true" class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 4a3 3 0 00-3 3v6a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H5zm-1 9v-1h5v2H5a1 1 0 01-1-1zm7 1h4a1 1 0 001-1v-1h-5v2zm0-4h5V8h-5v2zM9 8H4v2h5V8z" clip-rule="evenodd"></path></svg> | |
| <span class="flex-1 ml-3 whitespace-nowrap">Sign Up</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </aside> | |
| <div class="p-4 sm:ml-64"> | |
| <div class="p-4 border-2 border-gray-200 border-dashed rounded-lg dark:border-gray-700"> | |
| <div class="grid grid-cols-3 gap-4 mb-4"> | |
| <div class="flex items-center justify-center h-24 rounded bg-gray-50 dark:bg-gray-800"> | |
| <p class="text-2xl text-gray-400 dark:text-gray-500">+</p> | |
| </div> | |
| <div class="flex items-center justify-center h-24 rounded bg-gray-50 dark:bg-gray-800"> | |
| <p class="text-2xl text-gray-400 dark:text-gray-500">+</p> | |
| </div> | |
| <div class="flex items-center justify-center h-24 rounded bg-gray-50 dark:bg-gray-800"> | |
| <p class="text-2xl text-gray-400 dark:text-gray-500">+</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-center h-48 mb-4 rounded bg-gray-50 dark:bg-gray-800"> | |
| <p class="text-2xl text-gray-400 dark:text-gray-500">+</p> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"> | |
| <p class="text-2xl text-gray-400 dark:text-gray-500">+</p> | |
| </div> | |
| <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"> | |
| <p class="text-2xl text-gray-400 dark:text-gray-500">+</p> | |
| </div> | |
| <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"> | |
| <p class="text-2xl text-gray-400 dark:text-gray-500">+</p> | |
| </div> | |
| <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"> | |
| <p class="text-2xl text-gray-400 dark:text-gray-500">+</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-center h-48 mb-4 rounded bg-gray-50 dark:bg-gray-800"> | |
| <p class="text-2xl text-gray-400 dark:text-gray-500">+</p> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"> | |
| <p class="text-2xl text-gray-400 dark:text-gray-500">+</p> | |
| </div> | |
| <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"> | |
| <p class="text-2xl text-gray-400 dark:text-gray-500">+</p> | |
| </div> | |
| <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"> | |
| <p class="text-2xl text-gray-400 dark:text-gray-500">+</p> | |
| </div> | |
| <div class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"> | |
| <p class="text-2xl text-gray-400 dark:text-gray-500">+</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment