API tools faq
paste
RehabCZ

Dashboard - TailwndCSS + AlpineJS

RehabCZ
Jul 16th, 2025
141
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.64 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en" x-data="{ darkMode: false }" :class="{ 'dark': darkMode }">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Dashboard</title>
  7.   <script src="https://cdn.tailwindcss.com"></script>
  8.   <script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>
  9.   <style>
  10.     .transition-all {
  11.       transition: all 0.1s ease;
  12.     }
  13.     .rotate-180 {
  14.       transform: rotate(180deg);
  15.     }
  16.     .sidebar-tooltip {
  17.       position: absolute;
  18.       left: 100%;
  19.       top: 50%;
  20.       transform: translateY(-50%);
  21.       background-color: #1f2937;
  22.       color: #fff;
  23.       padding: 0.25rem 0.5rem;
  24.       border-radius: 0.25rem;
  25.       white-space: nowrap;
  26.       font-size: 0.875rem;
  27.       opacity: 0;
  28.       pointer-events: none;
  29.       transition: opacity 0.15s ease;
  30.     }
  31.     .group:hover .sidebar-tooltip {
  32.       opacity: 1;
  33.     }
  34.     .dropdown-bubble {
  35.       position: absolute;
  36.       left: 100%;
  37.       top: 0;
  38.       background-color: #1f2937;
  39.       color: #fff;
  40.       border-radius: 0.25rem;
  41.       padding: 0.5rem;
  42.       white-space: nowrap;
  43.       opacity: 0;
  44.       pointer-events: none;
  45.       transition: opacity 0.15s ease;
  46.     }
  47.     .group:hover .dropdown-bubble {
  48.       opacity: 1;
  49.       pointer-events: auto;
  50.     }
  51.   </style>
  52.   <script>
  53.     function dropdown(id) {
  54.       return {
  55.         isOpen: false,
  56.         init() {
  57.           this.$watch('activeDropdown', (value) => {
  58.             this.isOpen = (value === id);
  59.           });
  60.         },
  61.         toggle() {
  62.           this.activeDropdown = (this.isOpen ? null : id);
  63.         }
  64.       }
  65.     }
  66.   </script>
  67. </head>
  68. <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors relative" x-data="{
  69.  sidebarOpen: window.innerWidth >= 768,
  70.   activeDropdown: null,
  71.   menu: [
  72.     { name: 'Analytics', href: '/analytics' },
  73.     { name: 'Products', dropdown: [
  74.         { name: 'Sub Product 1', href: '/sub-product1' },
  75.         { name: 'Sub Product 2', href: '/sub-product2' },
  76.         { name: 'Sub Product 3', href: '/sub-product3' }
  77.       ]
  78.     },
  79.     { name: 'Settings', dropdown: [
  80.         { name: 'Profile', href: '/profile' },
  81.         { name: 'Account', href: '/account' }
  82.       ]
  83.     },
  84.     { name: 'Messages', href: '/messages' }
  85.   ],
  86.   signOut: { name: 'Sign Out', href: '/signout' }
  87. }">
  88. <div class="flex h-screen">
  89.   <!-- Sidebar -->
  90.   <aside class="bg-gray-100 dark:bg-gray-800 flex flex-col justify-between py-7 px-2 absolute inset-y-0 left-0 transform transition-all duration-100 ease-in-out z-50 md:relative"
  91.         :class="sidebarOpen ? 'translate-x-0 w-64' : '-translate-x-full md:w-16 md:translate-x-0'">
  92.     <div>
  93.       <div class="flex justify-between items-center px-2">
  94.         <div class="text-xl font-bold text-indigo-600 dark:text-indigo-400" x-show="sidebarOpen" x-transition>Business</div>
  95.         <button @click="sidebarOpen = !sidebarOpen"
  96.                class="focus:outline-none transform transition-transform duration-100"
  97.                :class="{ 'rotate-180': !sidebarOpen }">
  98.           <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  99.             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
  100.           </svg>
  101.         </button>
  102.       </div>
  103.       <nav class="mt-10 space-y-2">
  104.         <template x-for="(item, index) in menu" :key="index">
  105.           <div>
  106.             <!-- Regular Link -->
  107.             <template x-if="!item.dropdown">
  108.               <a :href="item.href" class="group relative flex items-center py-2 px-3 rounded hover:bg-gray-300 dark:hover:bg-gray-700 w-full transition-all duration-100"
  109.                 :class="!sidebarOpen ? 'md:justify-center' : ''">
  110.                 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 flex-shrink-0 md:mx-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  111.                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
  112.                 </svg>
  113.                 <span x-show="sidebarOpen" x-transition class="ml-2 whitespace-nowrap" x-text="item.name"></span>
  114.                 <span class="sidebar-tooltip hidden md:block" x-show="!sidebarOpen" x-text="item.name"></span>
  115.               </a>
  116.             </template>
  117.  
  118.             <!-- Dropdown -->
  119.             <template x-if="item.dropdown">
  120.               <div x-data="dropdown(item.name)" x-init="init()" class="relative group">
  121.                 <button @click="toggle"
  122.                        class="flex items-center justify-between w-full py-2 px-3 rounded hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-100"
  123.                        :class="!sidebarOpen ? 'md:justify-center' : ''">
  124.                   <div class="flex items-center">
  125.                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 flex-shrink-0 md:mx-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  126.                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7h18M3 12h18M3 17h18" />
  127.                     </svg>
  128.                     <span x-show="sidebarOpen" x-transition class="ml-2 whitespace-nowrap" x-text="item.name"></span>
  129.                   </div>
  130.                   <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transform transition-transform duration-100"
  131.                       fill="none" viewBox="0 0 24 24" stroke="currentColor"
  132.                       :class="isOpen ? 'rotate-180' : ''" x-show="sidebarOpen">
  133.                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
  134.                   </svg>
  135.                 </button>
  136.                 <div x-show="isOpen" x-collapse class="ml-6 border-l border-gray-300 dark:border-gray-600 pl-2 mt-1 space-y-1"
  137.                     x-transition:enter="transition ease-out duration-100" x-transition:enter-start="opacity-0"
  138.                     x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-75"
  139.                     x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
  140.                   <template x-for="(subItem, subIndex) in item.dropdown" :key="subIndex">
  141.                     <a :href="subItem.href"
  142.                       class="block py-1 px-2 rounded hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-100"
  143.                       x-text="subItem.name"></a>
  144.                   </template>
  145.                 </div>
  146.                 <div class="dropdown-bubble hidden md:block" x-show="!sidebarOpen">
  147.                   <template x-for="(subItem, subIndex) in item.dropdown" :key="subIndex">
  148.                     <a :href="subItem.href"
  149.                       class="block py-1 px-2 rounded hover:bg-gray-600"
  150.                       x-text="subItem.name"></a>
  151.                   </template>
  152.                 </div>
  153.               </div>
  154.             </template>
  155.           </div>
  156.         </template>
  157.       </nav>
  158.     </div>
  159.     <div class="border-t border-gray-300 dark:border-gray-700 pt-4 px-2">
  160.       <div class="flex items-center mb-2" x-show="sidebarOpen" x-transition>
  161.         <div class="w-8 h-8 rounded-full bg-gray-400 dark:bg-gray-600"></div>
  162.         <span class="ml-2 text-sm whitespace-nowrap">John Doe</span>
  163.       </div>
  164.       <a :href="signOut.href" class="group relative flex items-center py-2 px-3 rounded hover:bg-gray-300 dark:hover:bg-gray-700 w-full transition-all duration-100"
  165.         :class="!sidebarOpen ? 'md:justify-center' : ''">
  166.         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 flex-shrink-0 md:mx-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  167.           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7" />
  168.         </svg>
  169.         <span x-show="sidebarOpen" x-transition class="ml-2 whitespace-nowrap" x-text="signOut.name"></span>
  170.         <span class="sidebar-tooltip hidden md:block" x-show="!sidebarOpen" x-text="signOut.name"></span>
  171.       </a>
  172.     </div>
  173.   </aside>
  174.  
  175.   <!-- Backdrop overlay on mobile -->
  176.   <div x-show="sidebarOpen && window.innerWidth < 768" @click="sidebarOpen = false"
  177.       class="fixed inset-0 bg-black bg-opacity-40 z-40 md:hidden" x-transition.opacity></div>
  178.  
  179.   <!-- Main Content -->
  180.   <div class="flex-1 flex flex-col">
  181.     <!-- Header -->
  182.     <header class="flex justify-between items-center bg-gray-100 dark:bg-gray-800 px-4 py-3 shadow-md">
  183.       <div class="flex items-center">
  184.         <!-- Mobile sidebar toggle button -->
  185.         <button @click="sidebarOpen = true" class="md:hidden mr-2 focus:outline-none">
  186.           <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  187.             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
  188.           </svg>
  189.         </button>
  190.         <h1 class="text-2xl font-bold w-full text-center md:text-left">Analytics</h1>
  191.       </div>
  192.       <div class="flex items-center space-x-4">
  193.         <button @click="darkMode = !darkMode" class="focus:outline-none">
  194.           <svg x-show="!darkMode" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  195.             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m8.66-8.66h-1M4.34 12H3m16.07 4.93l-.7-.7M5.64 5.64l-.7-.7m12.02 12.02l.7-.7M5.64 18.36l-.7-.7M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
  196.           </svg>
  197.           <svg x-show="darkMode" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
  198.             <path d="M17.293 13.293A8 8 0 016.707 2.707a8 8 0 1010.586 10.586z" />
  199.           </svg>
  200.         </button>
  201.       </div>
  202.     </header>
  203.  
  204.     <!-- Content -->
  205.     <main class="flex-1 p-4 overflow-y-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  206.       <div class="bg-gray-50 dark:bg-gray-800 rounded shadow p-4 h-32"></div>
  207.       <div class="bg-gray-50 dark:bg-gray-800 rounded shadow p-4 h-32"></div>
  208.       <div class="bg-gray-50 dark:bg-gray-800 rounded shadow p-4 h-32"></div>
  209.       <div class="bg-gray-50 dark:bg-gray-800 rounded shadow p-4 h-32"></div>
  210.       <div class="bg-gray-50 dark:bg-gray-800 rounded shadow p-4 h-32"></div>
  211.       <div class="bg-gray-50 dark:bg-gray-800 rounded shadow p-4 h-32"></div>
  212.       <div class="bg-gray-200 dark:bg-gray-700 rounded h-48 md:col-span-2"></div>
  213.       <div class="bg-gray-200 dark:bg-gray-700 rounded h-48"></div>
  214.     </main>
  215.   </div>
  216. </div>
  217. </body>
  218. </html>
  219.  
Tags: html CSS js Dashboard TailwindCSS alpinejs
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!