Search Components

Sidebar

Content area on the side of the page

3D_Sidebar_Documentation_Wiki

A complex, 3D-inspired responsive sidebar component for documentation and wiki sites, using warm neutrals with full dark mode support.

Open Preview

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 font-sans">

  <!-- Sidebar -->
  <aside class="w-64 bg-white dark:bg-gray-800 shadow-xl transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out z-40 fixed md:relative" id="sidebar">
    <div class="h-16 flex items-center justify-between px-6 border-b border-gray-200 dark:border-gray-700">
      <a href="#" class="text-2xl font-extrabold text-gray-800 dark:text-gray-100 tracking-tight relative">
        <span class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-amber-400 to-amber-600 dark:from-yellow-500 dark:to-orange-700 opacity-20 rounded-lg blur-sm"></span>
        <span class="relative z-10">WikiHub</span>
      </a>
      <button onclick="document.getElementById('sidebar').classList.add('-translate-x-full')" class="md:hidden focus:outline-none text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
    
    <nav class="px-4 py-6 overflow-y-auto custom-scrollbar">
      <ul class="space-y-2">
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out group relative overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-amber-400 dark:from-yellow-400 dark:to-orange-500 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
            <svg class="flex-shrink-0 w-6 h-6 text-gray-500 dark:text-gray-400 group-hover:text-amber-600 dark:group-hover:text-yellow-400 mr-3 transition-colors duration-200 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
            <span class="relative z-10">Home</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out group relative overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-amber-400 dark:from-yellow-400 dark:to-orange-500 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
            <svg class="flex-shrink-0 w-6 h-6 text-gray-500 dark:text-gray-400 group-hover:text-amber-600 dark:group-hover:text-yellow-400 mr-3 transition-colors duration-200 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
            <span class="relative z-10">Getting Started</span>
          </a>
        </li>
        <li>
          <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-3 pt-4 pb-2">Core Concepts</h3>
          <ul class="space-y-1 pl-4">
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">Introduction</span>
              </a>
            </li>
            <li>
              <a href="#" class="relative flex items-center p-2 text-amber-600 dark:text-yellow-400 bg-amber-50 dark:bg-gray-700 rounded-md font-medium shadow-sm active:bg-amber-100 dark:active:bg-gray-600">
                <span class="text-sm">Architecture Overview</span>
                <span class="absolute inset-0 border-2 border-amber-400 dark:border-yellow-600 rounded-md animate-pulse pointer-events-none opacity-50"></span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">Data Models</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">API Reference</span>
              </a>
            </li>
          </ul>
        </li>
        <li>
          <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-3 pt-4 pb-2">Guides</h3>
          <ul class="space-y-1 pl-4">
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">Installation</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">Configuration</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">Deployment</span>
                <span class="ml-auto text-xs py-0.5 px-2 bg-amber-100 dark:bg-amber-800 text-amber-700 dark:text-amber-200 rounded-full font-medium shadow-inner opacity-75">New</span>
              </a>
            </li>
          </ul>
        </li>
        <li>
          <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-3 pt-4 pb-2">Resources</h3>
          <ul class="space-y-1 pl-4">
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">Changelog</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">FAQ</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center p-2 text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all duration-200 ease-in-out active:bg-gray-200 dark:active:bg-gray-800 active:shadow-inner">
                <span class="text-sm">Support</span>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>

    <div class="p-4 mt-auto border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center space-x-3 mb-4">
        <img class="w-10 h-10 rounded-full border border-gray-200 dark:border-gray-600 shadow-md transform hover:scale-105 transition-transform duration-200 ease-out" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <div>
          <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Documentation Admin</p>
        </div>
      </div>
      <button class="w-full flex items-center justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-yellow-500 transition-all duration-200 ease-in-out relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-amber-400 dark:from-yellow-400 dark:to-orange-500 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
        <svg class="mr-2 -ml-1 w-5 h-5 text-gray-500 dark:text-gray-400 group-hover:text-amber-600 dark:group-hover:text-yellow-400 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
        <span class="relative z-10">Logout</span>
      </button>
      
      <!-- Dark mode toggle -->
      <div class="mt-4 flex items-center justify-between text-gray-600 dark:text-gray-300">
        <label for="dark-mode-toggle" class="cursor-pointer flex items-center">
          <div class="relative">
            <input type="checkbox" id="dark-mode-toggle" class="sr-only" onchange="document.documentElement.classList.toggle('dark')">
            <div class="block bg-gray-300 dark:bg-gray-700 w-10 h-6 rounded-full"></div>
            <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition transform dark:translate-x-full dark:bg-gray-100"></div>
          </div>
          <span class="ml-3 text-sm">Dark Mode</span>
        </label>
      </div>

    </div>
  </aside>

  <!-- Main Content Area (Placeholder) -->
  <div class="flex-1 flex flex-col overflow-hidden relative">
    <!-- Top Bar for mobile menu button -->
    <header class="bg-white dark:bg-gray-800 shadow-sm h-16 flex items-center px-4 md:hidden border-b border-gray-200 dark:border-gray-700 relative z-30">
      <button onclick="document.getElementById('sidebar').classList.remove('-translate-x-full')" class="focus:outline-none focus:ring-2 focus:ring-inset focus:ring-amber-500 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 mr-4">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
      <h1 class="text-xl font-bold text-gray-800 dark:text-gray-100">Documentation</h1>
    </header>

    <main class="flex-1 overflow-x-hidden overflow-y-auto p-6 lg:p-8 custom-scrollbar">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl mb-6 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-100 to-amber-300 dark:from-yellow-700 dark:to-orange-800 opacity-5 dark:opacity-10 rounded-lg blur-md"></div>
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2 relative z-10">Welcome to WikiHub!</h2>
        <p class="text-gray-600 dark:text-gray-300 relative z-10">Explore our comprehensive guides and documentation.</p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out relative overflow-hidden group">
           <div class="absolute inset-0 bg-gradient-to-br from-amber-50 to-amber-200 dark:from-deep-orange-900 dark:to-orange-950 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 relative z-10">Quick Start</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm relative z-10">Get up and running with our step-by-step installation guide.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out relative overflow-hidden group">
          <div class="absolute inset-0 bg-gradient-to-br from-amber-50 to-amber-200 dark:from-deep-orange-900 dark:to-orange-950 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 relative z-10">API Reference</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm relative z-10">Detailed documentation for all available API endpoints.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out relative overflow-hidden group">
          <div class="absolute inset-0 bg-gradient-to-br from-amber-50 to-amber-200 dark:from-deep-orange-900 dark:to-orange-950 opacity-0 group-hover:opacity-10 transition-opacity duration-200 ease-in-out transform scale-105 group-hover:scale-100"></div>
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 relative z-10">Troubleshooting</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm relative z-10">Solutions to common issues and frequently asked questions.</p>
        </div>
      </div>
    </main>
  </div>

  <style>
    /* Custom scrollbar for better aesthetics */
    .custom-scrollbar::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: theme('colors.gray.100');
      border-radius: 10px;
    }
    .dark .custom-scrollbar::-webkit-scrollbar-track {
      background: theme('colors.gray.700');
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: theme('colors.gray.300');
      border-radius: 10px;
      border: 2px solid theme('colors.gray.100');
    }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: theme('colors.gray.600');
      border: 2px solid theme('colors.gray.700');
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background-color: theme('colors.gray.400');
    }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background-color: theme('colors.gray.500');
    }

    /* Dark mode toggle dot animation */
    #dark-mode-toggle:checked + div .dot {
      transform: translateX(100%);
    }
  </style>

</div>

RetroRealEstateSidebar

A simple, responsive sidebar component with a retro/vintage aesthetic, warm neutral color scheme, designed for real estate platforms. Includes dark mode support.

Open Preview

                <div class="flex h-screen bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900 font-mono text-stone-800 dark:text-stone-200 overflow-hidden">

  <!-- Sidebar for larger screens -->
  <aside class="w-64 flex-shrink-0 bg-stone-50 dark:bg-stone-800 border-r border-stone-200 dark:border-stone-700 p-6 hidden md:flex flex-col shadow-lg">
    <div class="mb-8 text-center">
      <h1 class="text-3xl font-bold tracking-wider text-stone-900 dark:text-stone-50 drop-shadow-sm">Neon Estate</h1>
      <p class="text-sm text-stone-500 dark:text-stone-400 mt-1">Your Future Awaits</p>
    </div>

    <nav class="flex-grow">
      <ul class="space-y-4">
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-stone-200 dark:bg-stone-700 text-stone-900 dark:text-stone-50 hover:bg-stone-300 dark:hover:bg-stone-600 transition-colors duration-200 shadow-md transform hover:scale-105">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
            </svg>
            <span>Dashboard</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm14 9V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2h3.586l-1.793 1.793a1 1 0 001.414 1.414L12 18.414l3.793 3.793A1 1 0 0017.207 21l-1.793-1.793V19a2 2 0 002-2v-5zM9 8a2 2 0 00-2 2v4a2 2 0 002 2h2a2 2 0 002-2v-4a2 2 0 00-2-2H9z" clip-rule="evenodd"></path>
            </svg>
            <span>Properties</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"></path>
            </svg>
            <span>Clients</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6.551a1.5 1.5 0 00-1.06.44l-1.9 1.9A1.5 1.5 0 011 17.05v-4.05a3 3 0 013-3h1V4a1 1 0 00-1-1H3a1 1 0 00-1 1v2zm.5 2H3a1 1 0 00-1 1v4a1 1 0 001 1h.5a.5.5 0 01.5.5V16L7.5 13.5a.5.5 0 01.354-.146H17a1 1 0 001-1V5a1 1 0 00-1-1H7a1 1 0 00-1 1v2zm-2 0z" clip-rule="evenodd"></path>
            </svg>
            <span>Messages</span>
          </a>
        </li>
      </ul>
    </nav>

    <div class="mt-8 pt-4 border-t border-stone-200 dark:border-stone-700">
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
        <img class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-600 shadow-sm" src="https://randomuser.me/api/portraits/men/86.jpg" alt="User Avatar">
        <span class="text-sm font-semibold">John Realtor</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 mt-2">
        <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M11.493 15.64a1 1 0 01-.018 1.488S16.29 19 16.29 19a1 1 0 01-.894 1.732h-10a1 1 0 01-.894-1.732s4.815-1.872 4.815-1.872a1 1 0 01-.018-1.488zM4.7 13.5a1 1 0 011.666-.889l8.668 4a1 1 0 01-.158 1.83l-8.668-4a1 1 0 01-.148-1.941zM2 10a1 1 0 01.996.938L3.13 15.06l-.001.002a2 2 0 00-.071 2.072l.092.124.08.106.07.097.06.082L.52 18.665a1 1 0 01-.077-1.393L2.27 15.82a1 1 0 011.4-.298l.006-.002c.005-.002.01-.005.015-.007a1 1 0 01-.065-.006l.005.006zM18 10a1 1 0 00-1-1h-.06l-.004-.002-.016-.007a1 1 0 00-.065.006l.005.006.015.007.004.002h-.06a1 1 0 00-.77 1.638l.007.009.006.007.005.006.004.005.003.004.002.002.001.002a1 1 0 001.488.018s1.872-4.815 1.872-4.815a1 1 0 00-1.732-.894z" clip-rule="evenodd"></path>
        </svg>
        <span>Settings</span>
      </a>
    </div>
  </aside>

  <!-- Mobile/Tablet Top Nav (hidden on desktop) -->
  <header class="md:hidden fixed top-0 left-0 w-full bg-stone-50 dark:bg-stone-800 border-b border-stone-200 dark:border-stone-700 p-4 flex justify-between items-center z-10 shadow-lg">
    <h1 class="text-2xl font-bold tracking-wider text-stone-900 dark:text-stone-50">Neon Estate</h1>
    <button id="mobile-menu-button" class="text-stone-700 dark:text-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 rounded-md p-1">
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
      </svg>
    </button>
  </header>

  <!-- Mobile/Tablet Sidebar Overlay (hidden by default) -->
  <div id="mobile-sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-20 hidden md:hidden"></div>

  <aside id="mobile-sidebar" class="fixed top-0 left-0 h-full w-64 bg-stone-50 dark:bg-stone-800 border-r border-stone-200 dark:border-stone-700 p-6 transform -translate-x-full transition-transform duration-300 ease-in-out z-30 md:hidden shadow-xl">
    <div class="mb-8 text-center">
      <h1 class="text-3xl font-bold tracking-wider text-stone-900 dark:text-stone-50 drop-shadow-sm">Neon Estate</h1>
      <p class="text-sm text-stone-500 dark:text-stone-400 mt-1">Your Future Awaits</p>
    </div>

    <nav class="flex-grow">
      <ul class="space-y-4">
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-stone-200 dark:bg-stone-700 text-stone-900 dark:text-stone-50 hover:bg-stone-300 dark:hover:bg-stone-600 transition-colors duration-200 shadow-md transform hover:scale-105">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
            </svg>
            <span>Dashboard</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm14 9V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2h3.586l-1.793 1.793a1 1 0 001.414 1.414L12 18.414l3.793 3.793A1 1 0 0017.207 21l-1.793-1.793V19a2 2 0 002-2v-5zM9 8a2 2 0 00-2 2v4a2 2 0 002 2h2a2 2 0 002-2v-4a2 2 0 00-2-2H9z" clip-rule="evenodd"></path>
            </svg>
            <span>Properties</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"></path>
            </svg>
            <span>Clients</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6.551a1.5 1.5 0 00-1.06.44l-1.9 1.9A1.5 1.5 0 011 17.05v-4.05a3 3 0 013-3h1V4a1 1 0 00-1-1H3a1 1 0 00-1 1v2zm.5 2H3a1 1 0 00-1 1v4a1 1 0 001 1h.5a.5.5 0 01.5.5V16L7.5 13.5a.5.5 0 01.354-.146H17a1 1 0 001-1V5a1 1 0 00-1-1H7a1 1 0 00-1 1v2zm-2 0z" clip-rule="evenodd"></path>
            </svg>
            <span>Messages</span>
          </a>
        </li>
      </ul>
    </nav>

    <div class="mt-8 pt-4 border-t border-stone-200 dark:border-stone-700">
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200">
        <img class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-600 shadow-sm" src="https://randomuser.me/api/portraits/men/86.jpg" alt="User Avatar">
        <span class="text-sm font-semibold">John Realtor</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 mt-2">
        <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M11.493 15.64a1 1 0 01-.018 1.488S16.29 19 16.29 19a1 1 0 01-.894 1.732h-10a1 1 0 01-.894-1.732s4.815-1.872 4.815-1.872a1 1 0 01-.018-1.488zM4.7 13.5a1 1 0 011.666-.889l8.668 4a1 1 0 01-.158 1.83l-8.668-4a1 1 0 01-.148-1.941zM2 10a1 1 0 01.996.938L3.13 15.06l-.001.002a2 2 0 00-.071 2.072l.092.124.08.106.07.097.06.082L.52 18.665a1 1 0 01-.077-1.393L2.27 15.82a1 1 0 011.4-.298l.006-.002c.005-.002.01-.005.015-.007a1 1 0 01-.065-.006l.005.006.015.007.004.002h-.06a1 1 0 00-.77 1.638l.007.009.006.007.005.006.004.005.003.004.002.002.001.002a1 1 0 001.488.018s1.872-4.815 1.872-4.815a1 1 0 00-1.732-.894z" clip-rule="evenodd"></path>
        </svg>
        <span>Settings</span>
      </a>
    </div>
  </aside>

  <!-- Main Content Area (for demonstration, just a placeholder) -->
  <main class="flex-1 p-8 pt-20 md:pt-8 overflow-y-auto">
    <h2 class="text-4xl font-bold text-stone-900 dark:text-stone-50 mb-6 drop-shadow-lg">Welcome, John!</h2>
    <p class="mb-8 text-stone-700 dark:text-stone-300 max-w-2xl">Here's a quick overview of your real estate dashboard. Explore properties, manage clients, and track messages.</p>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-stone-50 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-200">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-3">Total Listings</h3>
        <p class="text-4xl font-bold text-stone-600 dark:text-stone-400">1,234</p>
      </div>
      <div class="bg-stone-50 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-200">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-3">New Inquiries</h3>
        <p class="text-4xl font-bold text-teal-600 dark:text-teal-400">42</p>
      </div>
      <div class="bg-stone-50 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-200 dark:border-stone-700 transform hover:scale-105 transition-transform duration-200">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-3">Pending Sales</h3>
        <p class="text-4xl font-bold text-orange-600 dark:text-orange-400">15</p>
      </div>
    </div>
  </main>

  <script>
    // Basic JavaScript for mobile sidebar toggle
    document.addEventListener('DOMContentLoaded', () => {
      const mobileMenuButton = document.getElementById('mobile-menu-button');
      const mobileSidebar = document.getElementById('mobile-sidebar');
      const mobileSidebarOverlay = document.getElementById('mobile-sidebar-overlay');

      mobileMenuButton.addEventListener('click', () => {
        mobileSidebar.classList.toggle('-translate-x-full');
        mobileSidebarOverlay.classList.toggle('hidden');
      });

      mobileSidebarOverlay.addEventListener('click', () => {
        mobileSidebar.classList.add('-translate-x-full');
        mobileSidebarOverlay.classList.add('hidden');
      });

      // Close sidebar if screen resized to desktop
      window.addEventListener('resize', () => {
        if (window.innerWidth >= 768) { // md breakpoint
          mobileSidebar.classList.add('-translate-x-full');
          mobileSidebarOverlay.classList.add('hidden');
        }
      });
    });
  </script>
</div>

3D_Earth_Tones_Non_Profit_Sidebar

A complex, responsive sidebar component with 3D design elements and an earth tones color scheme, suitable for non-profit and charity websites. Includes dark mode support and semantic HTML.

Open Preview

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 font-sans">
  <!-- Mobile / Tablet Overlay -->
  <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden lg:hidden"></div>

  <!-- Sidebar -->
  <aside id="sidebar" class="fixed top-0 left-0 w-64 h-full bg-gradient-to-br from-yellow-700 to-yellow-900 dark:from-gray-800 dark:to-gray-900 text-white transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out z-40 shadow-xl border-r border-yellow-800 dark:border-gray-700 overflow-y-auto overflow-x-hidden flex flex-col pt-6 pb-4">
    <!-- Sidebar Header (3D Effect) -->
    <div class="p-4 mb-8 relative">
      <div class="absolute inset-0 bg-yellow-900 bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg transform rotate-[-2deg] scale-105 shadow-inner"></div>
      <div class="relative flex items-center justify-center p-2 bg-yellow-800 dark:bg-gray-800 rounded-lg transform translate-y-0.5 translate-x-0.5 shadow-md border border-yellow-700 dark:border-gray-700">
        <img src="https://picsum.photos/40/40?random=1" alt="Non-Profit Logo" class="rounded-full mr-3 shadow-md border-2 border-yellow-600 dark:border-gray-600">
        <h1 class="text-2xl font-extrabold tracking-wide text-white drop-shadow-lg">Hope Nexus</h1>
      </div>
    </div>

    <!-- Navigation -->
    <nav class="flex-grow space-y-2 px-4">
      <a href="#" class="group flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out text-yellow-100 dark:text-gray-200 perspective-1000
        bg-gradient-to-r from-yellow-800/80 to-yellow-700/80 dark:from-gray-700/80 dark:to-gray-600/80
        hover:from-yellow-700 hover:to-yellow-600 hover:text-white dark:hover:from-gray-600 dark:hover:to-gray-500 dark:hover:text-white
        hover:shadow-lg hover:shadow-yellow-900/40 dark:hover:shadow-gray-900/40
        relative overflow-hidden cursor-pointer">
        <div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-800/20 transform rotate-[-3deg] scale-105 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="relative flex items-center w-full">
          <svg class="w-6 h-6 mr-3 text-yellow-300 dark:text-gray-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
            </path>
          </svg>
          <span class="font-semibold">Dashboard</span>
          <span class="ml-auto text-xs font-bold px-2 py-0.5 rounded-full bg-yellow-600 dark:bg-gray-700 text-yellow-100 dark:text-gray-300">New</span>
        </div>
      </a>

      <a href="#" class="group flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out text-yellow-100 dark:text-gray-200 perspective-1000
        bg-gradient-to-r from-yellow-800/80 to-yellow-700/80 dark:from-gray-700/80 dark:to-gray-600/80
        hover:from-yellow-700 hover:to-yellow-600 hover:text-white dark:hover:from-gray-600 dark:hover:to-gray-500 dark:hover:text-white
        hover:shadow-lg hover:shadow-yellow-900/40 dark:hover:shadow-gray-900/40
        relative overflow-hidden cursor-pointer">
        <div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-800/20 transform rotate-[-3deg] scale-105 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="relative flex items-center w-full">
          <svg class="w-6 h-6 mr-3 text-yellow-300 dark:text-gray-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13.493m0-13.493V6.253a4.5 4.5 0 100 9v0M12 6.253C12 5.094 13.921 5 15 5h1a2 2 0 012 2v2M12 6.253a4.5 4.5 0 010 9v0m0 0C12 18.906 10.079 19 9 19H8a2 2 0 01-2-2v-2m6-10V6.253m0 0a4.5 4.5 0 00-4.5 4.5v0m4.5-4.5a4.5 4.5 0 014.5 4.5v0">
            </path>
          </svg>
          <span class="font-semibold">Campaigns</span>
        </div>
      </a>

      <a href="#" class="group flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out text-yellow-100 dark:text-gray-200 perspective-1000
        bg-gradient-to-r from-yellow-800/80 to-yellow-700/80 dark:from-gray-700/80 dark:to-gray-600/80
        hover:from-yellow-700 hover:to-yellow-600 hover:text-white dark:hover:from-gray-600 dark:hover:to-gray-500 dark:hover:text-white
        hover:shadow-lg hover:shadow-yellow-900/40 dark:hover:shadow-gray-900/40
        relative overflow-hidden cursor-pointer">
        <div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-800/20 transform rotate-[-3deg] scale-105 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="relative flex items-center w-full">
          <svg class="w-6 h-6 mr-3 text-yellow-300 dark:text-gray-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z">
            </path>
          </svg>
          <span class="font-semibold">Donations</span>
          <span class="group-hover:animate-ping absolute right-3 top-1/2 -translate-y-1/2 h-2 w-2 rounded-full bg-green-400 opacity-75"></span>
          <span class="absolute right-3 top-1/2 -translate-y-1/2 h-2 w-2 rounded-full bg-green-500"></span>
        </div>
      </a>

      <a href="#" class="group flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out text-yellow-100 dark:text-gray-200 perspective-1000
        bg-gradient-to-r from-yellow-800/80 to-yellow-700/80 dark:from-gray-700/80 dark:to-gray-600/80
        hover:from-yellow-700 hover:to-yellow-600 hover:text-white dark:hover:from-gray-600 dark:hover:to-gray-500 dark:hover:text-white
        hover:shadow-lg hover:shadow-yellow-900/40 dark:hover:shadow-gray-900/40
        relative overflow-hidden cursor-pointer">
        <div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-800/20 transform rotate-[-3deg] scale-105 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="relative flex items-center w-full">
          <svg class="w-6 h-6 mr-3 text-yellow-300 dark:text-gray-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
            </path>
          </svg>
          <span class="font-semibold">Volunteers</span>
        </div>
      </a>

      <a href="#" class="group flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out text-yellow-100 dark:text-gray-200 perspective-1000
        bg-gradient-to-r from-yellow-800/80 to-yellow-700/80 dark:from-gray-700/80 dark:to-gray-600/80
        hover:from-yellow-700 hover:to-yellow-600 hover:text-white dark:hover:from-gray-600 dark:hover:to-gray-500 dark:hover:text-white
        hover:shadow-lg hover:shadow-yellow-900/40 dark:hover:shadow-gray-900/40
        relative overflow-hidden cursor-pointer">
        <div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-800/20 transform rotate-[-3deg] scale-105 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="relative flex items-center w-full">
          <svg class="w-6 h-6 mr-3 text-yellow-300 dark:text-gray-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z">
            </path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z">
            </path>
          </svg>
          <span class="font-semibold">Settings</span>
        </div>
      </a>
    </nav>

    <!-- User Profile (Bottom) -->
    <div class="mt-auto p-4">
      <div class="p-3 rounded-xl bg-yellow-800 dark:bg-gray-800 border border-yellow-700 dark:border-gray-700 shadow-lg relative perspective-1000">
        <div class="absolute inset-0 bg-yellow-900/20 dark:bg-gray-700/20 rounded-xl transform rotate-[2deg] scale-105 shadow-inner"></div>
        <div class="relative flex items-center">
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 shadow-md border-2 border-yellow-600 dark:border-gray-600">
            <div>
                <p class="font-semibold text-sm text-white">Jane Doe</p>
                <p class="text-xs text-yellow-200 dark:text-gray-400">Administrator</p>
            </div>
            <button class="ml-auto p-2 rounded-full hover:bg-yellow-700 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-gray-500">
                <svg class="w-5 h-5 text-yellow-300 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 9h5a2 2 0 002-2V7a2 2 0 00-2-2h-5">
                    </path>
                </svg>
            </button>
        </div>
      </div>
    </div>
  </aside>

  <!-- Main Content (for demonstration, includes toggle button) -->
  <main class="flex-1 p-6 lg:ml-64 transition-all duration-300 ease-in-out">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Main Content Area</h2>
      <p class="text-gray-700 dark:text-gray-300 mb-6">This is where your main application content would go. The sidebar is fully responsive.</p>
      <div class="flex items-center space-x-4 mb-6">
        <button id="sidebar-toggle" class="lg:hidden p-3 rounded-lg bg-yellow-600 hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 text-white shadow-md">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
        </button>
        <button id="dark-mode-toggle" class="lg:hidden p-3 rounded-lg bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 text-white shadow-md">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
        </button>

        <button id="desktop-dark-mode-toggle" class="hidden lg:block p-3 rounded-lg bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 text-white shadow-md">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
        </button>
      </div>
      <p class="text-gray-600 dark:text-gray-400">Resize your browser to see responsiveness. Click the menu icon on smaller screens.</p>
    </div>
  </main>
</div>

<script>
  // Dark Mode Toggle Logic
  const darkModeToggleDesktop = document.getElementById('desktop-dark-mode-toggle');
  const darkModeToggleMobile = document.getElementById('dark-mode-toggle');

  function setDarkMode(isDark) {
    if (isDark) {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    } else {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    }
  }

  // Check for saved theme or system preference
  if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    setDarkMode(true);
  }

  darkModeToggleDesktop.addEventListener('click', () => {
    setDarkMode(!document.documentElement.classList.contains('dark'));
  });
  darkModeToggleMobile.addEventListener('click', () => {
    setDarkMode(!document.documentElement.classList.contains('dark'));
  });

  // Sidebar Toggle Logic
  const sidebar = document.getElementById('sidebar');
  const sidebarOverlay = document.getElementById('sidebar-overlay');
  const sidebarToggle = document.getElementById('sidebar-toggle');

  const toggleSidebar = () => {
    sidebar.classList.toggle('-translate-x-full');
    sidebarOverlay.classList.toggle('hidden');
  };

  sidebarToggle.addEventListener('click', toggleSidebar);
  sidebarOverlay.addEventListener('click', toggleSidebar);

  // Close sidebar on larger screens if it was open on mobile
  window.addEventListener('resize', () => {
    if (window.innerWidth >= 1024) { // Tailwind's 'lg' breakpoint
      if (!sidebar.classList.contains('lg:translate-x-0')) {
        sidebar.classList.remove('-translate-x-full'); // Ensure it's shown
        sidebar.classList.add('lg:translate-x-0');
      }
      sidebarOverlay.classList.add('hidden'); // Ensure overlay is hidden on desktop
    }
  });
</script>

Consulting_Sidebar_Dark_Candy_Complex

A complex, responsive sidebar component for consulting/services, featuring a dark mode UI with candy/sweet color accents. Includes navigation, user profile, and quick links.

Open Preview

                <div class="flex h-screen bg-slate-900 dark:bg-gray-950 text-white font-sans">

  <!-- Sidebar -->
  <div class="flex flex-col w-64 bg-slate-800 dark:bg-gray-900 shadow-lg transition-all duration-300 ease-in-out md:translate-x-0" id="sidebar">

    <!-- Sidebar Header/Logo -->
    <div class="flex items-center justify-center h-20 bg-pink-600 dark:bg-pink-700 shadow-md">
      <span class="text-2xl font-bold uppercase tracking-wide text-white">ConsultPro</span>
    </div>

    <!-- User Profile Section -->
    <div class="flex flex-col items-center py-6 border-b border-gray-700 dark:border-gray-800">
      <img class="w-24 h-24 rounded-full border-4 border-pink-400 dark:border-pink-500 shadow-lg" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <p class="mt-3 text-lg font-semibold text-pink-100 dark:text-pink-200">Alice Johnson</p>
      <span class="text-sm text-gray-400 dark:text-gray-500">Senior Consultant</span>
      <div class="flex mt-2 space-x-2">
        <span class="px-3 py-1 text-xs font-semibold text-purple-700 dark:text-purple-300 bg-purple-200 dark:bg-purple-800 rounded-full">Premium</span>
        <span class="px-3 py-1 text-xs font-semibold text-teal-700 dark:text-teal-300 bg-teal-200 dark:bg-teal-800 rounded-full">Active</span>
      </div>
    </div>

    <!-- Navigation Menu -->
    <nav class="flex-1 px-4 py-6 overflow-y-auto custom-scrollbar">
      <ul class="space-y-2">
        <li>
          <a href="#" class="flex items-center p-3 text-pink-100 dark:text-pink-200 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
            <svg class="h-6 w-6 mr-3 text-pink-300 dark:text-pink-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0C9 9 10 6 11 3s4 3 4 9L9 21z"></path></svg>
            <span class="text-md font-medium">Dashboard</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
            <svg class="h-6 w-6 mr-3 text-gray-500 dark:text-gray-600 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"></path></svg>
            <span class="text-md font-medium">Clients</span>
            <span class="ml-auto bg-green-500 dark:bg-green-600 text-white text-xs font-semibold px-2.5 py-0.5 rounded-full">12</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
            <svg class="h-6 w-6 mr-3 text-gray-500 dark:text-gray-600 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M10 12l2-2 2 2m-2-2v6m0-4h.01"></path></svg>
            <span class="text-md font-medium">Projects</span>
            <span class="ml-auto bg-yellow-500 dark:bg-yellow-600 text-white text-xs font-semibold px-2.5 py-0.5 rounded-full">New</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
            <svg class="h-6 w-6 mr-3 text-gray-500 dark:text-gray-600 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span class="text-md font-medium">Schedule</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
            <svg class="h-6 w-6 mr-3 text-gray-500 dark:text-gray-600 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h10M7 16h10M9 3H5C3.895 3 3 3.895 3 5V19c0 1.105.895 2 2 2h14c1.105 0 2-.895 2-2V5c0-1.105-.895-2-2-2h-4M9 3v2c0 1.105-.895 2-2 2H5m14-4v2c0 1.105-.895 2-2 2h-4"></path></svg>
            <span class="text-md font-medium">Reports</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white">
            <svg class="h-6 w-6 mr-3 text-gray-500 dark:text-gray-600 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.071-.16.2-.28.35-.38l.608-.433a.997.997 0 011.034 0l.608.433c.15.1.279.22.35.38C14.072 5.097 15 5.928 15 7v3.586a1 1 0 01-.293.707l-3.586 3.586a1 1 0 01-1.414 0L7.293 11.293A1 1 0 017 10.586V7c0-1.072.928-1.903 2.175-2.683zM14 2c1 0 2 .5 2 1.5V11a2 2 0 01-2 2l-3 3c-.5.5-.667.667-1 1s-.5 0-1-1l-3-3a2 2 0 01-2-2V3.5C6 2.5 7 2 8 2h6zM4 17a2 2 0 002 2h12a2 2 0 002-2v-4a1 1 0 00-1-1H5a1 1 0 00-1 1v4z"></path></svg>
            <span class="text-md font-medium">Settings</span>
          </a>
        </li>
      </ul>

      <div class="mt-8">
        <h3 class="text-xs uppercase font-semibold text-gray-400 dark:text-gray-500 mb-2">Quick Links</h3>
        <ul class="space-y-1">
          <li>
            <a href="#" class="flex items-center p-2 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white text-sm">
              <span class="w-2 h-2 rounded-full bg-blue-500 dark:bg-blue-600 mr-2"></span> Latest Articles
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-2 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white text-sm">
              <span class="w-2 h-2 rounded-full bg-purple-500 dark:bg-purple-600 mr-2"></span> Upcoming Events
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-2 text-gray-300 dark:text-gray-400 rounded-lg transition duration-200 ease-in-out group hover:bg-pink-700 dark:hover:bg-pink-800 hover:text-white text-sm">
              <span class="w-2 h-2 rounded-full bg-orange-500 dark:bg-orange-600 mr-2"></span> My Tasks
            </a>
          </li>
        </ul>
      </div>
    </nav>

    <!-- Sidebar Footer -->
    <div class="p-4 border-t border-gray-700 dark:border-gray-800">
      <button class="flex items-center justify-center w-full px-4 py-2 text-white bg-pink-600 dark:bg-pink-700 rounded-lg shadow-md hover:bg-pink-700 dark:hover:bg-pink-800 transition duration-200 ease-in-out">
        <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
        <span>Logout</span>
      </button>
    </div>
  </div>

  <!-- Main Content Area (for demonstration, can be expanded) -->
  <div class="flex-1 flex flex-col p-8">
    <h1 class="text-3xl font-bold text-pink-400 dark:text-pink-300 mb-6">Dashboard Overview</h1>
    <p class="text-gray-300 dark:text-gray-400">Welcome back, Alice! Here's a quick look at your current activities.</p>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
      <div class="bg-slate-800 dark:bg-gray-900 rounded-xl shadow-lg p-6 flex flex-col items-start">
        <h2 class="text-lg font-semibold text-pink-200 mb-2">Active Projects</h2>
        <p class="text-4xl font-bold text-pink-400">23</p>
        <span class="text-sm text-green-400">+5 this month</span>
      </div>
      <div class="bg-slate-800 dark:bg-gray-900 rounded-xl shadow-lg p-6 flex flex-col items-start">
        <h2 class="text-lg font-semibold text-pink-200 mb-2">New Clients</h2>
        <p class="text-4xl font-bold text-pink-400">8</p>
        <span class="text-sm text-yellow-400">+2 this week</span>
      </div>
      <div class="bg-slate-800 dark:bg-gray-900 rounded-xl shadow-lg p-6 flex flex-col items-start">
        <h2 class="text-lg font-semibold text-pink-200 mb-2">Pending Tasks</h2>
        <p class="text-4xl font-bold text-pink-400">17</p>
        <span class="text-sm text-red-400">Urgent: 3</span>
      </div>
    </div>
  </div>

  <!-- Mobile Sidebar Toggle (hidden on desktop) -->
  <button class="md:hidden fixed top-4 left-4 z-50 p-3 rounded-full bg-pink-600 dark:bg-pink-700 text-white shadow-xl focus:outline-none" onclick="document.getElementById('sidebar').classList.toggle('translate-x-full'); document.getElementById('sidebar').classList.toggle('bg-slate-800'); document.getElementById('sidebar').classList.toggle('dark:bg-gray-900'); this.classList.toggle('translate-x-52');">
    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
  </button>

  <!-- Overlay for mobile (hidden on desktop) -->
  <div class="md:hidden fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300 ease-in-out opacity-0 pointer-events-none" id="sidebar-overlay"></div>

  <!-- Inline style for custom-scrollbar -->
  <style>
    .custom-scrollbar::-webkit-scrollbar {
      width: 8px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
      background: #374151; /* gray-700 */
      border-radius: 4px;
    }

    .dark .custom-scrollbar::-webkit-scrollbar-track {
      background: #1f2937; /* gray-800 */
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #f472b6; /* pink-400 */
      border-radius: 4px;
    }

    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
      background: #ec4899; /* pink-500 */
    }

    /* Mobile specific adjustments using JS for sidebar toggle */
    @media (max-width: 767px) {
      #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 50;
        transform: translateX(-100%);
      }
      .toggle-button {
        transition: transform 0.3s ease-in-out;
      }
      .sidebar-open #sidebar {
        transform: translateX(0%);
      }
      .sidebar-open .toggle-button {
        transform: translateX(208px); /* 256px sidebar width - 48px button width */
      }
      .sidebar-open #sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
      }
    }
  </style>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const sidebar = document.getElementById('sidebar');
      const sidebarToggle = document.querySelector('button[onclick*="sidebar"]');
      const sidebarOverlay = document.getElementById('sidebar-overlay');

      sidebarToggle.addEventListener('click', () => {
        document.body.classList.toggle('sidebar-open');
        sidebar.classList.toggle('translate-x-0');
        sidebar.classList.toggle('-translate-x-full'); // Added to ensure it slides off screen
        sidebarOverlay.classList.toggle('opacity-0');
        sidebarOverlay.classList.toggle('pointer-events-none');
        sidebarOverlay.classList.toggle('opacity-100');
        sidebarOverlay.classList.toggle('pointer-events-auto');
      });

      sidebarOverlay.addEventListener('click', () => {
        document.body.classList.remove('sidebar-open');
        sidebar.classList.remove('translate-x-0');
        sidebar.classList.add('-translate-x-full');
        sidebarOverlay.classList.add('opacity-0');
        sidebarOverlay.classList.add('pointer-events-none');
        sidebarOverlay.classList.remove('opacity-100');
        sidebarOverlay.classList.remove('pointer-events-auto');
        // Also revert the button position
        sidebarToggle.classList.remove('translate-x-52');
      });

      // Close sidebar if window resized to desktop from mobile
      window.addEventListener('resize', () => {
        if (window.innerWidth >= 768) {
          document.body.classList.remove('sidebar-open');
          sidebar.classList.remove('-translate-x-full');
          sidebar.classList.add('translate-x-0');
          sidebarOverlay.classList.add('opacity-0');
          sidebarOverlay.classList.add('pointer-events-none');
          sidebarOverlay.classList.remove('opacity-100');
          sidebarOverlay.classList.remove('pointer-events-auto');
          // Revert button for desktop view
          sidebarToggle.classList.remove('translate-x-52');
        }
      });
    });
  </script>
</div>

Cryptocurrency Sidebar Component

A complex, responsive sidebar component designed for cryptocurrency and blockchain applications, featuring Material Design principles with a muted color scheme and full dark mode support.

Open Preview

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
  <!-- Sidebar -->
  <div class="w-64 flex-shrink-0 bg-white dark:bg-gray-800 shadow-lg md:relative absolute inset-y-0 left-0 transform -translate-x-full md:translate-x-0 transition duration-300 ease-in-out z-40" id="sidebar">
    <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
      <div class="flex items-center">
        <svg class="w-8 h-8 text-indigo-600 dark:text-indigo-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M10.25 10h3.5m-3.5 3h3.5m-4.5 9V5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3-7 3z"></path>
        </svg>
        <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">CryptoVault</span>
      </div>
      <button class="md:hidden text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none" onclick="document.getElementById('sidebar').classList.add('-translate-x-full'); document.getElementById('backdrop').classList.add('hidden');">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
    <nav class="mt-4">
      <a href="#" class="flex items-center py-3 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out active:bg-gray-300 dark:active:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-15 4v-2a3 3 0 013-3h2m0 0a3 3 0 013-3h2m-3 2v5h-5M3 12h18"></path>
        </svg>
        Dashboard
      </a>
      <a href="#" class="flex items-center py-3 px-4 text-indigo-600 dark:text-indigo-400 bg-gray-200 dark:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out shadow-sm">
        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4.636 17.364l-.707.707M3 12H2m1-.636L1.636 4.636l.707.707M12 22v-1m-4.636-.707l-.707-.707M3 12h-1M12 21v-1m-4.636-1.364l-.707-.707M2 12h-1M12 23v-1M12 15a3 3 0 110-6 3 3 0 010 6z"></path>
        </svg>
        Portfolio
      </a>
      <a href="#" class="flex items-center py-3 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v2m0 0v6a2 2 0 002 2h2m2-4h1v4c0 .552.448 1 1 1h2a1 1 0 001-1v-4h1m-6 0h6m-9-6h9c1.657 0 3 1.343 3 3v3H3V6c0-1.657 1.343-3 3-3z"></path>
        </svg>
        Transactions
      </a>
      <a href="#" class="flex items-center py-3 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3m0 0l3 3m-3-3v8m0-9a9 9 0 11-9 9m9-9A9 9 0 0121 12a9 9 0 01-9 9m-9-9a9 9 0 009 9m0-9V5"></path>
        </svg>
        Exchange
      </a>
      <a href="#" class="flex items-center py-3 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
        </svg>
        Analytics
      </a>
    </nav>
    <div class="mt-auto p-4 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center space-x-3 mb-4">
        <img class="h-10 w-10 rounded-full object-cover border-2 border-indigo-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
        <div>
          <p class="font-medium text-gray-900 dark:text-gray-100">Jane Doe</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Premium User</p>
        </div>
      </div>
      <a href="#" class="w-full flex items-center justify-center py-2 px-4 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
        Settings
      </a>
    </div>
  </div>

  <!-- Main Content Area Placeholder -->
  <div class="flex-1 flex flex-col overflow-hidden">
    <!-- Top Bar (Minimal for this component) -->
    <header class="flex items-center justify-between p-4 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shadow-md">
      <button class="md:hidden focus:outline-none text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300" onclick="document.getElementById('sidebar').classList.remove('-translate-x-full'); document.getElementById('backdrop').classList.remove('hidden');">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
      <h1 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Portfolio Overview</h1>
      <div class="flex items-center space-x-4">
        <!-- Dark mode toggle placeholder -->
        <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500" onclick="document.documentElement.classList.toggle('dark')">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
        </button>
      </div>
    </header>
    <main class="flex-1 overflow-x-hidden overflow-y-auto p-6">
      <!-- Your main content goes here -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
          <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Total Balance</h2>
          <p class="text-3xl font-bold text-indigo-600 dark:text-indigo-400">$23,456.78</p>
          <p class="text-sm text-green-500 mt-2">+3.4% today</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
          <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Bitcoin Holding</h2>
          <p class="text-2xl font-bold text-gray-900 dark:text-gray-100">0.5 BTC</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Value: $15,000</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
          <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Recent Activity</h2>
          <ul class="space-y-3">
            <li class="flex justify-between items-center text-gray-700 dark:text-gray-300 text-sm">
              <span>Buy ETH</span>
              <span class="text-green-500">+$500</span>
            </li>
            <li class="flex justify-between items-center text-gray-700 dark:text-gray-300 text-sm">
              <span>Sell ADA</span>
              <span class="text-red-500">-$120</span>
            </li>
            <li class="flex justify-between items-center text-gray-700 dark:text-gray-300 text-sm">
              <span>Deposit USD</span>
              <span class="text-green-500">+$1000</span>
            </li>
          </ul>
        </div>
      </div>
    </main>
  </div>

  <!-- Overlay for mobile sidebar -->
  <div class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden md:hidden" id="backdrop" onclick="document.getElementById('sidebar').classList.add('-translate-x-full'); this.classList.add('hidden');"></div>
</div>

Gradient Agriculture Sidebar

A simple, responsive sidebar component with a monochromatic gradient design, suitable for agriculture and farming websites. Includes dark mode support.

Open Preview

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <aside class="flex flex-col w-64 bg-gradient-to-br from-green-500 to-emerald-700 text-white shadow-lg dark:from-green-700 dark:to-emerald-900 transition-all duration-300 ease-in-out">
    <div class="flex items-center justify-center h-20 border-b border-green-600 dark:border-green-800">
      <h1 class="text-3xl font-bold tracking-wide transition-colors duration-300 dark:text-gray-100">AgriHub</h1>
    </div>
    <nav class="flex-1 py-6 space-y-2 overflow-y-auto custom-scrollbar">
      <a href="#" class="flex items-center py-3 px-6 text-lg font-medium hover:bg-green-600 hover:bg-opacity-50 transition-colors duration-200 ease-in-out group">
        <svg class="w-6 h-6 mr-4 text-green-100 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
        </svg>
        Dashboard
      </a>
      <a href="#" class="flex items-center py-3 px-6 text-lg font-medium hover:bg-green-600 hover:bg-opacity-50 transition-colors duration-200 ease-in-out group">
        <svg class="w-6 h-6 mr-4 text-green-100 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
        </svg>
        Crop Management
      </a>
      <a href="#" class="flex items-center py-3 px-6 text-lg font-medium hover:bg-green-600 hover:bg-opacity-50 transition-colors duration-200 ease-in-out group">
        <svg class="w-6 h-6 mr-4 text-green-100 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
        </svg>
        Livestock
      </a>
      <a href="#" class="flex items-center py-3 px-6 text-lg font-medium hover:bg-green-600 hover:bg-opacity-50 transition-colors duration-200 ease-in-out group">
        <svg class="w-6 h-6 mr-4 text-green-100 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
        </svg>
        Resources
      </a>
      <a href="#" class="flex items-center py-3 px-6 text-lg font-medium hover:bg-green-600 hover:bg-opacity-50 transition-colors duration-200 ease-in-out group">
        <svg class="w-6 h-6 mr-4 text-green-100 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
        Settings
      </a>
    </nav>
    <div class="p-6 border-t border-green-600 dark:border-green-800">
      <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-green-200 dark:border-green-400 object-cover" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar">
        <div>
          <p class="font-semibold text-green-50 dark:text-gray-100">John Doe</p>
          <p class="text-sm text-green-100 dark:text-gray-300">Admin</p>
        </div>
      </div>
    </div>
  </aside>
  <main class="flex-1 p-6 lg:p-10 overflow-y-auto custom-scrollbar">
    <h2 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-6 transition-colors duration-300">Welcome to AgriHub!</h2>
    <p class="text-gray-700 dark:text-gray-300 text-lg mb-8 transition-colors duration-300">Manage your farm operations efficiently and effectively.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transition-colors duration-300">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Total Crops</h3>
        <p class="text-4xl font-bold text-green-600 dark:text-green-400">120 Acres</p>
        <img src="https://picsum.photos/id/101/400/250" alt="Field View" class="mt-4 rounded-lg object-cover w-full h-40">
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transition-colors duration-300">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Livestock Count</h3>
        <p class="text-4xl font-bold text-green-600 dark:text-green-400">345 Heads</p>
        <img src="https://picsum.photos/id/200/400/250" alt="Livestock" class="mt-4 rounded-lg object-cover w-full h-40">
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transition-colors duration-300">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Recent Activity</h3>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2">
          <li>Harvested Wheat (5 days ago)</li>
          <li>Fertilized Corn Field (2 days ago)</li>
          <li>Cattle vaccinated (yesterday)</li>
        </ul>
        <img src="https://picsum.photos/id/300/400/250" alt="Farm Activity" class="mt-4 rounded-lg object-cover w-full h-40">
      </div>
    </div>
  </main>
</div>

<style>
  /* Custom scrollbar for better appearance */
  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    border-radius: 4px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5);
  }

  /* Dark mode scrollbar */
  .dark .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
  }

  .dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
  }

  .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.6);
  }

  /* For responsiveness, adjust sidebar width on smaller screens */
  @media (max-width: 768px) {
    aside {
      width: 100%;
      height: auto;
      position: relative; /* Allow sidebar to stack */
      flex-direction: row; /* Stack items horizontally on mobile */
      flex-wrap: wrap; /* Allow wrapping */
      justify-content: space-around; /* Distribute items */
      padding-top: 0;
      padding-bottom: 0;
    }

    aside div:first-child {
      display: none; /* Hide logo/title on very small screens if desired */
    }

    aside nav {
      flex-direction: row;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      padding-top: 1rem;
      padding-bottom: 1rem;
      width: 100%;
    }

    aside nav a {
      min-width: 120px;
      justify-content: center;
      padding: 0.75rem 1rem;
      font-size: 0.9rem;
      flex-shrink: 0;
    }

    aside nav a svg {
        margin-right: 0.5rem;
    }

    aside div:last-child {
      display: none; /* Hide user info on very small screens */
    }

    main {
      padding: 1rem;
    }
  }
</style>

Neon_Glow_Grayscale_Sports_Sidebar

A complex, responsive sidebar component for sports/fitness applications, featuring neon/glow effects within a grayscale color scheme. Includes dark mode support and interactive elements like profile, navigation, teams, and settings.

Open Preview

                <div class="flex h-screen bg-gray-950 text-gray-300 dark:bg-black dark:text-gray-200">
  <!-- Sidebar -->
  <div class="flex flex-col w-64 md:w-72 bg-gray-900 border-r border-gray-800 shadow-xl dark:bg-[#1a1a1a] dark:border-gray-800 transition-all duration-300">
    <div class="flex items-center justify-center h-20 border-b border-gray-800 relative">
      <div class="absolute inset-0 bg-gradient-to-r from-transparent via-blue-500/20 to-transparent blur-md opacity-0 dark:opacity-100 transition-opacity duration-500"></div>
      <div class="absolute inset-0 bg-gradient-to-r from-transparent via-pink-500/10 to-transparent blur-3xl opacity-0 dark:opacity-100 transition-opacity duration-500 z-0"></div>
      <h1 class="text-2xl font-extrabold tracking-wider uppercase text-gray-50 dark:text-gray-50 relative z-10">
        <span class="text-blue-400 dark:text-blue-500">FIT</span><span class="text-pink-400 dark:text-pink-500">HUB</span>
      </h1>
    </div>

    <nav class="flex-1 py-6 px-4 space-y-2 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-700 scrollbar-track-gray-900">

      <!-- Profile Section -->
      <div class="flex items-center p-4 rounded-lg bg-gray-800 hover:bg-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 transition-all duration-200 relative group">
        <div class="absolute inset-0 bg-blue-500/10 dark:bg-blue-500/20 opacity-0 group-hover:opacity-100 blur-sm transition-opacity duration-300"></div>
        <img class="h-12 w-12 rounded-full border-2 border-blue-400 dark:border-blue-500 object-cover relative z-10" src="https://randomuser.me/api/portraits/women/65.jpg" alt="User Avatar">
        <div class="ml-4 relative z-10">
          <p class="font-semibold text-gray-50 dark:text-gray-100">Jane Doe</p>
          <p class="text-sm text-gray-400 dark:text-gray-400">Athlete Pro</p>
        </div>
      </div>

      <!-- Main Navigation -->
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-blue-600/30 hover:text-blue-400 dark:hover:bg-blue-500/20 dark:hover:text-blue-500 group relative overflow-hidden transition-all duration-200">
        <div class="absolute inset-0 bg-blue-500/10 dark:bg-blue-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h3v-3m-6 0v3H9m0-6h.01M10 12l-2 2m2-2l2 2m-6 4h4"></path></svg>
        <span class="relative z-10">Dashboard</span>
      </a>
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-pink-600/30 hover:text-pink-400 dark:hover:bg-pink-500/20 dark:hover:text-pink-500 group relative overflow-hidden transition-all duration-200">
        <div class="absolute inset-0 bg-pink-500/10 dark:bg-pink-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.79 2-4 2s-4-.895-4-2 1.79-2 4-2 4 .895 4 2zm12-3c0 1.105-1.79 2-4 2s-4-.895-4-2 1.79-2 4-2 4 .895 4 2zM9 10l12-3"></path></svg>
        <span class="relative z-10">Workouts</span>
      </a>
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-blue-600/30 hover:text-blue-400 dark:hover:bg-blue-500/20 dark:hover:text-blue-500 group relative overflow-hidden transition-all duration-200">
        <div class="absolute inset-0 bg-blue-500/10 dark:bg-blue-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h-4l-3-3H6.5a2.5 2.5 0 010-5H17l-3-3h4l3 3V20z"></path></svg>
        <span class="relative z-10">Team Stats</span>
      </a>
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-pink-600/30 hover:text-pink-400 dark:hover:bg-pink-500/20 dark:hover:text-pink-500 group relative overflow-hidden transition-all duration-200">
        <div class="absolute inset-0 bg-pink-500/10 dark:bg-pink-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
        <span class="relative z-10">Schedule</span>
      </a>
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-blue-600/30 hover:text-blue-400 dark:hover:bg-blue-500/20 dark:hover:text-blue-500 group relative overflow-hidden transition-all duration-200">
        <div class="absolute inset-0 bg-blue-500/10 dark:bg-blue-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17L3 11m0 0l6-6m-6 6h12a2 2 0 012 2v6a2 2 0 01-2 2H3a2 2 0 01-2-2v-6a2 2 0 012-2zm0 0l6-6m-6 6h12a2 2 0 012 2v6a2 2 0 01-2 2H3a2 2 0 01-2-2v-6a2 2 0 012-2z"></path></svg>
        <span class="relative z-10">Reports</span>
      </a>

      <!-- Teams Section -->
      <div class="pt-4">
        <h3 class="text-xs uppercase tracking-wider text-gray-500 font-semibold mb-2">Teams</h3>
        <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
          <div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <span class="h-3 w-3 rounded-full bg-red-500 relative z-10 animate-pulse-glow-red"></span>
          <span class="ml-3 relative z-10">Phoenix United</span>
        </a>
        <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
          <div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <span class="h-3 w-3 rounded-full bg-green-500 relative z-10 animate-pulse-glow-green"></span>
          <span class="ml-3 relative z-10">Galaxy Runners</span>
        </a>
        <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
          <div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <span class="h-3 w-3 rounded-full bg-purple-500 relative z-10 animate-pulse-glow-purple"></span>
          <span class="ml-3 relative z-10">Zenith Strikers</span>
        </a>
      </div>
    </nav>

    <!-- Footer / Settings -->
    <div class="px-4 py-6 border-t border-gray-800">
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
        <div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        <span class="relative z-10">Settings</span>
      </a>
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
        <div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h12"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        <span class="relative z-10">Logout</span>
      </a>
    </div>
  </div>

  <!-- Main Content Area (for demonstration, not part of the sidebar itself) -->
  <div class="flex-1 p-8 text-gray-100 dark:text-gray-50 overflow-auto">
    <h2 class="text-3xl font-bold mb-6">
      <span class="text-blue-400 dark:text-blue-500">Welcome,</span> <span class="text-pink-400 dark:text-pink-500">Athlete!</span>
    </h2>
    <p class="mb-4">This is a placeholder for your main application content.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="p-6 rounded-lg bg-gray-800 border border-gray-700 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent opacity-0 group-hover:opacity-100 blur-sm transition-opacity duration-300"></div>
        <h3 class="text-xl font-semibold mb-2 relative z-10">Daily Activity</h3>
        <p class="text-gray-400 relative z-10">Track your steps, calories, and active minutes.</p>
        <img src="https://picsum.photos/300/200?random=1" alt="Daily Activity" class="mt-4 rounded-md object-cover w-full h-32 relative z-10 opacity-70 group-hover:opacity-90 transition-opacity duration-300">
      </div>
      <div class="p-6 rounded-lg bg-gray-800 border border-gray-700 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-pink-500/10 to-transparent opacity-0 group-hover:opacity-100 blur-sm transition-opacity duration-300"></div>
        <h3 class="text-xl font-semibold mb-2 relative z-10">Upcoming Events</h3>
        <p class="text-gray-400 relative z-10">Don't miss a game or practice session.</p>
        <img src="https://picsum.photos/300/200?random=2" alt="Upcoming Events" class="mt-4 rounded-md object-cover w-full h-32 relative z-10 opacity-70 group-hover:opacity-90 transition-opacity duration-300">
      </div>
      <div class="p-6 rounded-lg bg-gray-800 border border-gray-700 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent opacity-0 group-hover:opacity-100 blur-sm transition-opacity duration-300"></div>
        <h3 class="text-xl font-semibold mb-2 relative z-10">Performance Insights</h3>
        <p class="text-gray-400 relative z-10">Visualize your progress over time.</p>
        <img src="https://picsum.photos/300/200?random=3" alt="Performance Insights" class="mt-4 rounded-md object-cover w-full h-32 relative z-10 opacity-70 group-hover:opacity-90 transition-opacity duration-300">
      </div>
    </div>
    <p class="text-gray-500 mt-8 text-center text-sm">This content area demonstrates dark mode and overall integration.</p>
  </div>

  <style>
    /* Custom scrollbar for Webkit browsers */
    .scrollbar-thin::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    .scrollbar-thin::-webkit-scrollbar-track {
      background: transparent;
    }

    .scrollbar-thin::-webkit-scrollbar-thumb {
      background-color: #4a5568; /* gray-700 */
      border-radius: 4px;
      border: 2px solid transparent;
    }

    .scrollbar-thin::-webkit-scrollbar-thumb:hover {
      background-color: #61626c; /* slightly lighter on hover */
    }

    /* Tailwind Animation Utilities */
    @keyframes pulse-glow-red {
      0%, 100% {
        box-shadow: 0 0 0px #ef4444;
      }
      50% {
        box-shadow: 0 0 8px #ef4444, 0 0 16px #ef4444;
      }
    }
    .animate-pulse-glow-red {
        animation: pulse-glow-red 2s infinite ease-in-out;
    }

    @keyframes pulse-glow-green {
      0%, 100% {
        box-shadow: 0 0 0px #22c55e;
      }
      50% {
        box-shadow: 0 0 8px #22c55e, 0 0 16px #22c55e;
      }
    }
    .animate-pulse-glow-green {
        animation: pulse-glow-green 2s infinite ease-in-out;
    }

     @keyframes pulse-glow-purple {
      0%, 100% {
        box-shadow: 0 0 0px #a855f7;
      }
      50% {
        box-shadow: 0 0 8px #a855f7, 0 0 16px #a855f7;
      }
    }
    .animate-pulse-glow-purple {
        animation: pulse-glow-purple 2s infinite ease-in-out;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .w-64 {
            width: 56px; /* Collapsed width on mobile */
        }

        .md\:w-72 {
            width: 56px; /* Override for mobile, effectively */
        }

        .flex-col .text-2xl, .flex-col .text-base, .flex-col .text-sm, .flex-col .text-lg, .flex-col .ml-4, .flex-col .mr-3, .flex-col .px-4, .flex-col .py-3, .flex-col .h-12, .flex-col .w-12, .flex-col .h-5, .flex-col .w-5, .flex-col .px-4, .flex-col .py-6 {
            display: none; /* Hide text/padding elements when collapsed */
        }

        .flex-col .h-20 {
            height: 60px;
        }

        .flex-col .items-center.justify-center {
            justify-content: center;
        }

        .flex-col .h-20 .text-2xl {
            display: initial; /* Show title on mobile */
            font-size: 1.5rem; /* Smaller title on mobile */
            line-height: 1.75rem;
        }

        .flex-col .h-20 .text-2xl span {
            display: none;
        }

         .flex-col .h-20 h1:before {
            content: 'F'; /* Show only 'F' for the logo on mobile */
            display: block;
            color: #60a5fa;
         }

         .flex-col .h-20 h1.dark\:text-gray-50:before {
            color: #60a5fa;
         }

        .flex-col .flex-col {
            width: 56px; /* Ensure collapsed width */
        }

        .flex-col .rounded-full {
            margin: auto; /* Center avatar */
        }

        .flex-col svg {
            margin-right: 0; /* Remove margin for icons */
        }

        .flex-col .px-4.py-3 {
            padding-left:0.9rem; /* Adjust padding for icons only */
            padding-right:0.9rem;
            justify-content: center;
        }

         .flex-col .px-4.py-3 span {
             display:none; /* Hide icon text */
         }

         .flex-col .rounded-lg.bg-gray-800, .flex-col .pt-4 {
            margin-top: 0; /* Adjust spacing */
            margin-bottom: 0;
         }
         .flex-col .pt-4 .text-xs {
            display: none; /* Hide team section title on mobile */
         }
         .flex-col .h-3.w-3 {
            margin: auto; /* Center team status indicator */
         }
         .flex-col .px-4.py-6 {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
         }
    }
  </style>
</div>

Healthcare Sidebar Component

A complex, minimalist, and responsive sidebar component for healthcare applications, featuring an analogous color scheme and dark mode support. Includes navigation, user profile, and quick links.

Open Preview

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
  <!-- Sidebar -->
  <div class="flex flex-col w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 shadow-lg transition-all duration-300 ease-in-out md:translate-x-0" id="sidebar">
    <!-- Sidebar Header -->
    <div class="flex items-center justify-between h-16 px-4 border-b border-gray-200 dark:border-gray-700">
      <a href="#" class="flex items-center space-x-2">
        <svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
        </svg>
        <span class="text-xl font-semibold text-gray-900 dark:text-white">MedPanel</span>
      </a>
      <!-- Mobile menu button - hidden on desktop -->
      <button type="button" class="md:hidden text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 rounded" aria-controls="sidebar" aria-expanded="false" onclick="document.getElementById('sidebar').classList.toggle('translate-x-0'); document.getElementById('sidebar').classList.toggle('-translate-x-full');">
        <span class="sr-only">Open sidebar</span>
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>

    <!-- User Profile -->
    <div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700">
      <img class="h-12 w-12 rounded-full ring-2 ring-indigo-500 dark:ring-indigo-400" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User avatar">
      <div class="ml-3">
        <p class="text-lg font-medium text-gray-900 dark:text-white">Dr. Elena Smith</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Cardiologist</p>
      </div>
    </div>

    <!-- Main Navigation -->
    <nav class="flex-1 px-2 py-4 space-y-1 overflow-y-auto">
      <a href="#" class="flex items-center p-3 rounded-lg text-indigo-700 dark:text-indigo-300 bg-indigo-100 dark:bg-indigo-700/30 font-semibold hover:bg-indigo-100 dark:hover:bg-indigo-700/50 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-6-6v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
        </svg>
        <span>Dashboard</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
        </svg>
        <span>Patients</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2zm7-9v5m-5-5h5m-5 0h.01M12 12c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2z" />
        </svg>
        <span>Appointments</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
        </svg>
        <span>Records</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M10 14v10m-2-5a2 2 0 002 2h4a2 2 0 002-2m-2 0V11m0 0h2m-2 0H8m6 0h2m-2 0v5m4-5v5M7 7h.01M17 7h.01" />
        </svg>
        <span>Analytics</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
        </svg>
        <span>Messages <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">3</span></span>
      </a>
    </nav>

    <!-- Quick Links / Settings -->
    <div class="mt-auto px-2 py-4 border-t border-gray-200 dark:border-gray-700">
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
        </svg>
        <span>Settings</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
        </svg>
        <span>Logout</span>
      </a>
    </div>
  </div>

  <!-- Main Content Area (dummy content for layout) -->
  <main class="flex-1 p-6 md:p-8 overflow-y-auto">
    <h1 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white">Dashboard Overview</h1>
    <p class="text-gray-700 dark:text-gray-300">Welcome to your healthcare management system. Use the sidebar to navigate through different sections.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
        <h2 class="text-xl font-semibold mb-3 text-gray-900 dark:text-white">Upcoming Appointments</h2>
        <p class="text-gray-700 dark:text-gray-300">Dr. John Doe - Cardiology, Today 10:00 AM</p>
        <p class="text-gray-700 dark:text-gray-300">Ms. Jane Smith - Pediatrics, Tomorrow 02:30 PM</p>
        <a href="#" class="mt-4 inline-block text-indigo-600 dark:text-indigo-400 hover:underline">View all</a>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
        <h2 class="text-xl font-semibold mb-3 text-gray-900 dark:text-white">Recent Patients</h2>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300">
          <li>Patient ID: P2023001 - <span class="font-medium">Sarah Connor</span></li>
          <li>Patient ID: P2023002 - <span class="font-medium">Kyle Reese</span></li>
        </ul>
        <a href="#" class="mt-4 inline-block text-indigo-600 dark:text-indigo-400 hover:underline">View all</a>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
        <h2 class="text-xl font-semibold mb-3 text-gray-900 dark:text-white">Pending Tasks</h2>
        <p class="text-gray-700 dark:text-gray-300">Review lab results for Patient P2023001</p>
        <p class="text-gray-700 dark:text-gray-300">Update medication for Patient P2023002</p>
        <a href="#" class="mt-4 inline-block text-indigo-600 dark:text-indigo-400 hover:underline">View all</a>
      </div>
    </div>
  </main>

  <!-- Overlay for mobile sidebar -->
  <div class="fixed inset-0 bg-gray-900 bg-opacity-50 z-40 md:hidden -translate-x-full transition-opacity duration-300 ease-in-out" id="sidebar-overlay" onclick="document.getElementById('sidebar').classList.toggle('translate-x-0'); document.getElementById('sidebar').classList.toggle('-translate-x-full'); document.getElementById('sidebar-overlay').classList.toggle('opacity-100'); document.getElementById('sidebar-overlay').classList.toggle('-translate-x-full');"></div>

  <script>
    // This small script is for handling the mobile sidebar open/close functionality.
    // In a real application, you'd likely use a framework or more robust JS.
    const sidebar = document.getElementById('sidebar');
    const sidebarToggleButton = document.querySelector('button[aria-controls="sidebar"]');
    const sidebarOverlay = document.getElementById('sidebar-overlay');

    sidebarToggleButton.addEventListener('click', () => {
      sidebar.classList.toggle('-translate-x-full');
      sidebarOverlay.classList.toggle('-translate-x-full');
    });

    sidebarOverlay.addEventListener('click', () => {
      sidebar.classList.add('-translate-x-full');
      sidebarOverlay.classList.add('-translate-x-full');
    });
  </script>
</div>

Neumorphic_Sidebar_Component

A simple, responsive, neumorphic sidebar component for business/corporate websites with complementary colors and dark mode support.

Open Preview

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 font-sans text-gray-800 dark:text-gray-200">
  <!-- Sidebar -->
  <aside class="flex flex-col w-64 bg-gray-100 dark:bg-gray-800 shadow-xl rounded-2xl m-4 p-4 transition-all duration-300 ease-in-out
                lg:w-72 xl:w-80
                sm:m-2 sm:rounded-xl sm:p-3
                fixed inset-y-0 left-0 transform -translate-x-full lg:static lg:translate-x-0
                peer-checked:translate-x-0 z-50
                dark:shadow-none dark:border dark:border-gray-700
                " id="sidebar">
    <!-- Sidebar Header -->
    <div class="flex items-center justify-center h-16 mb-6 p-4 rounded-xl
                bg-gradient-to-br from-blue-500 to-indigo-600 shadow-lg
                dark:from-blue-700 dark:to-indigo-800 dark:shadow-xl">
      <h1 class="text-2xl font-bold text-white">Company Name</h1>
    </div>

    <!-- Navigation Links -->
    <nav class="flex-1">
      <ul class="space-y-4">
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out
                      bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium
                      shadow-md hover:shadow-lg
                      dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:shadow-none dark:border dark:border-gray-600">
            <svg class="w-6 h-6 mr-3 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h3v-3m-3 3h3v-3m0 0h3m-3 3h3m-3 0v3m-3-3v3m-3-3h3v-3m-3 3v3m-3-3h3m-3 0v3"></path>
            </svg>
            Dashboard
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out
                      bg-gray-100 hover:bg-gray-200 text-gray-600
                      shadow-inner hover:shadow-md
                      dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:shadow-none dark:border dark:border-gray-700">
            <svg class="w-6 h-6 mr-3 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
              </path>
            </svg>
            Analytics
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out
                      bg-gray-100 hover:bg-gray-200 text-gray-600
                      shadow-inner hover:shadow-md
                      dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:shadow-none dark:border dark:border-gray-700">
            <svg class="w-6 h-6 mr-3 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857m7.5-3.5a3 3 0 11-6 0 3 3 0 016 0zm-3-8a3 3 0 11-6 0 3 3 0 016 0z">
              </path>
            </svg>
            Customers
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl transform transition-all duration-200 ease-in-out
                      bg-gray-100 hover:bg-gray-200 text-gray-600
                      shadow-inner hover:shadow-md
                      dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:shadow-none dark:border dark:border-gray-700">
            <svg class="w-6 h-6 mr-3 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h8m-11 5h12M17 19H7a2 2 0 01-2-2V5a2 2 0 012-2h10a2 2 0 012 2v12a2 2 0 01-2 2z">
              </path>
            </svg>
            Reports
          </a>
        </li>
      </ul>
    </nav>

    <!-- Dark Mode Toggle -->
    <div class="mt-8">
      <label for="dark-mode-toggle" class="relative inline-flex items-center cursor-pointer p-2 rounded-xl
                  bg-gray-100 shadow-inner
                  hover:shadow-md transition-all duration-300 ease-in-out
                  dark:bg-gray-800 dark:border dark:border-gray-700 dark:shadow-none">
        <input type="checkbox" id="dark-mode-toggle" class="sr-only peer" onchange="document.documentElement.classList.toggle('dark')">
        <div class="flex items-center justify-between w-full">
          <span class="text-gray-600 dark:text-gray-300 font-medium mr-2">Dark Mode:</span>
          <div class="w-11 h-6 bg-gray-300 rounded-full peer peer-focus:ring-2 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-700 peer-checked:bg-blue-600">
          </div>
        </div>
      </label>
    </div>

    <!-- User Profile -->
    <div class="mt-auto p-4 rounded-xl
                bg-gray-200 shadow-md
                dark:bg-gray-700 dark:shadow-inner dark:border dark:border-gray-600">
      <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-blue-500 dark:border-blue-400 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <p class="font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">CEO, Company</p>
        </div>
      </div>
    </div>
  </aside>

  <!-- Overlay for small screens -->
  <label for="sidebar-toggle" class="absolute inset-0 bg-black bg-opacity-30 z-40 hidden peer-checked:block lg:hidden" aria-hidden="true"></label>

  <!-- Content Area (for demonstration, can be removed) -->
  <main class="flex-1 p-8 lg:ml-68 sm:ml-0 transition-all duration-300">
    <!-- Hidden checkbox for toggling sidebar on small screens -->
    <input type="checkbox" id="sidebar-toggle" class="hidden peer">

    <!-- Hamburger Icon for small screens -->
    <label for="sidebar-toggle" class="lg:hidden cursor-pointer absolute top-4 left-4 z-50 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 shadow-md transform transition-all duration-300 ease-in-out">
      <svg class="w-8 h-8 text-gray-700 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
    </label>

    <h2 class="text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 mt-16 lg:mt-0">Main Content Area</h2>
    <p class="text-gray-700 dark:text-gray-300">This is where your main content will go. The sidebar is designed to be responsive and work across various screen sizes.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
      <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-md dark:shadow-none dark:border dark:border-gray-600">
        <h3 class="font-semibold text-gray-800 dark:text-gray-100 text-lg mb-2">Card Title 1</h3>
        <p class="text-gray-700 dark:text-gray-300">Some descriptive text for this card content.</p>
      </div>
      <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-md dark:shadow-none dark:border dark:border-gray-600">
        <h3 class="font-semibold text-gray-800 dark:text-gray-100 text-lg mb-2">Card Title 2</h3>
        <p class="text-gray-700 dark:text-gray-300">Some descriptive text for this card content.</p>
      </div>
      <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-md dark:shadow-none dark:border dark:border-gray-600">
        <h3 class="font-semibold text-gray-800 dark:text-gray-100 text-lg mb-2">Card Title 3</h3>
        <p class="text-gray-700 dark:text-gray-300">Some descriptive text for this card content.</p>
      </div>
    </div>
  </main>
</div>

Sidebar Component

A complex, responsive, Glassmorphism-styled sidebar component for a dashboard, featuring earth tones and dark mode support.

Open Preview

                <div class="flex h-screen bg-stone-100 dark:bg-stone-900">
  <!-- Sidebar -->
  <div class="flex flex-col w-64 bg-white/30 dark:bg-stone-800/30 backdrop-blur-lg p-4 shadow-lg md:flex">
    <div class="text-2xl font-semibold text-stone-800 dark:text-stone-100 mb-6">Dashboard</div>
    <nav class="flex-1 space-y-2">
      <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-stone-700 dark:text-stone-200 hover:bg-white/50 dark:hover:bg-stone-700/50 transition duration-200">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l-7 7m7-7v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h2a1 1 0 001-1v-3m-6 0h6"></path></svg>
        <span>Home</span>
      </a>
      <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-stone-700 dark:text-stone-200 hover:bg-white/50 dark:hover:bg-stone-700/50 transition duration-200">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 012-2h2a2 2 0 012 2v1m-4 0h3m-3 0h-3"></path></svg>
        <span>Analytics</span>
      </a>
      <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-stone-700 dark:text-stone-200 hover:bg-white/50 dark:hover:bg-stone-700/50 transition duration-200">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M12 20.354a4 4 0 110-5.292M12 14.354a4 4 0 110 5.292M12 8.354a4 4 0 110 5.292"></path></svg>
        <span>Reports</span>
      </a>
      <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-stone-700 dark:text-stone-200 hover:bg-white/50 dark:hover:bg-stone-700/50 transition duration-200">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
        <span>Users</span>
      </a>
    </nav>
    <div class="mt-6 flex items-center space-x-3 p-3 rounded-lg bg-white/40 dark:bg-stone-700/40">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
      <div>
        <p class="font-medium text-stone-800 dark:text-stone-100">John Doe</p>
        <a href="#" class="text-sm text-stone-600 dark:text-stone-300 hover:underline">View Profile</a>
      </div>
    </div>
  </div>

  <!-- Main Content (for demonstration purposes) -->
  <div class="flex-1 p-8 overflow-y-auto">
    <h1 class="text-3xl font-bold text-stone-800 dark:text-stone-100 mb-6">Dashboard Overview</h1>
    <p class="text-stone-700 dark:text-stone-200">This is the main content area. The sidebar is a Glassmorphism-styled component with earth tones and dark mode support.</p>
    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white/30 dark:bg-stone-800/30 backdrop-blur-lg p-6 rounded-lg shadow-lg">
        <h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4">Card 1</h2>
        <p class="text-stone-700 dark:text-stone-200">Some content for card 1. This demonstrates a typical content area next to the sidebar.</p>
      </div>
      <div class="bg-white/30 dark:bg-stone-800/30 backdrop-blur-lg p-6 rounded-lg shadow-lg">
        <h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4">Card 2</h2>
        <p class="text-stone-700 dark:text-stone-200">More content for card 2. The design uses natural colors and provides a rich interface.</p>
      </div>
      <div class="bg-white/30 dark:bg-stone-800/30 backdrop-blur-lg p-6 rounded-lg shadow-lg">
        <h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4">Card 3</h2>
        <p class="text-stone-700 dark:text-stone-200">Final card content. The responsive design adapts to different screen sizes.</p>
      </div>
    </div>
  </div>
</div>

Search Components

Categories

Sidebar