Search Components

Navigation Bar

Typically located at the top of the page, containing main links

Art Deco Navigation Bar

A responsive, Art Deco inspired navigation bar for CRM/Business Tools, featuring geometric patterns, rich jewel tones, and dark mode support. Designed with moderate complexity, including interactive elements.

Open Preview

                <nav class="bg-gradient-to-r from-emerald-700 to-emerald-900 dark:from-gray-900 dark:to-gray-950 p-4 shadow-xl font-sans relative z-50">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Logo/Brand Section -->
    <div class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
      </svg>
      <a href="#" class="text-white text-2xl font-bold tracking-wider uppercase font-serif antialiased">CRM Suite</a>
    </div>

    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button class="text-white hover:text-emerald-200 focus:outline-none focus:ring-2 focus:ring-emerald-300" onclick="this.nextElementSibling.classList.toggle('hidden')">
        <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>

    <!-- Navigation Links (Desktop) -->
    <div class="hidden md:flex space-x-8 lg:space-x-12 items-center">
      <a href="#" class="text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out relative group">
        Dashboard
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#" class="text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out relative group">
        Customers
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#" class="text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out relative group">
        Sales
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#" class="text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out relative group">
        Analytics
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#" class="text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out relative group">
        Settings
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
    </div>

    <!-- User Actions (Desktop) -->
    <div class="hidden md:flex items-center space-x-6">
      <button class="text-white hover:text-emerald-200 focus:outline-none focus:ring-2 focus:ring-emerald-300 rounded-full p-2 relative group">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
        </svg>
        <span class="absolute -top-1 -right-1 inline-flex items-center justify-center px-2 py-1 text-xs font-semibold leading-none text-red-100 bg-red-600 rounded-full">3</span>
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </button>
      <div class="relative group">
        <img class="h-9 w-9 rounded-full object-cover cursor-pointer border-2 border-emerald-300 hover:border-emerald-500 transition-colors duration-300" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
        <!-- Dropdown placeholder (can be implemented with JS for full functionality) -->
        <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg py-1 hidden group-hover:block transition-all duration-300 ease-out transform scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 z-10">
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-emerald-100 dark:hover:bg-gray-700">Profile</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-emerald-100 dark:hover:bg-gray-700">Settings</a>
          <form action="#" method="POST">
            <button type="submit" class="block w-full text-left px-4 py-2 text-red-600 hover:bg-emerald-100 dark:hover:bg-gray-700 dark:text-red-400">Sign Out</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile Menu (Collapsed by default) -->
  <div class="hidden md:hidden absolute top-full left-0 w-full bg-gradient-to-b from-emerald-800 to-emerald-900 dark:from-gray-900 dark:to-gray-950 shadow-md pb-4 pt-2 animate-fade-in-down">
    <div class="flex flex-col items-center space-y-4">
      <a href="#" class="block text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out">Dashboard</a>
      <a href="#" class="block text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out">Customers</a>
      <a href="#" class="block text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out">Sales</a>
      <a href="#" class="block text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out">Analytics</a>
      <a href="#" class="block text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out">Settings</a>
      <button class="text-white hover:text-emerald-200 focus:outline-none focus:ring-2 focus:ring-emerald-300 rounded-full p-2 relative inline-flex items-center">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
        </svg>
        <span class="ml-2 text-white">Notifications <span class="text-red-300">(3)</span></span>
      </button>
      <img class="h-10 w-10 rounded-full object-cover border-2 border-emerald-300" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
    </div>
  </div>
</nav>

<style>
  /* This is a simple animation for the mobile menu. 
     For a real-world scenario, you'd use a JS toggle.
     The 'hidden' class is toggled directly on the element in the HTML for demonstration.
      Tailwind's 'animate-fade-in-down' requires a keyframe definition within a CSS file or style block. 
     For a pure HTML/Tailwind solution, more complex animations might rely on utility classes alone 
     or external configuration, but for 'moderate complexity' with some 'interactive features' (like an expanding menu),
     a small style block for keyframes is practical and doesn't break the 'no JS' rule for the *component display* itself.
  */
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 0.3s ease-out forwards;
  }
</style>

Luxury_Premium_Dating_Social_NavBar

A luxury/premium style navigation bar for dating/social platforms, featuring elegant typography, high contrast color scheme, and responsive design with dark mode support. Includes interactive elements like a profile avatar and notification icon.

Open Preview

                <nav class="bg-gradient-to-r from-purple-900 to-indigo-900 dark:from-gray-950 dark:to-black shadow-lg py-4 px-6 md:px-12 fixed w-full z-50 top-0">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Logo/Brand Name -->
    <a href="#" class="text-white font-serif text-3xl md:text-4xl font-extrabold tracking-wider hover:text-purple-300 dark:hover:text-gray-400 transition duration-300 ease-in-out">
      LuxeMatch
    </a>

    <!-- Navigation Links (Hidden on small screens, shown on medium and up) -->
    <div class="hidden md:flex space-x-8 lg:space-x-12">
      <a href="#" class="text-gray-300 text-lg font-semibold hover:text-white dark:hover:text-gray-300 transition duration-300 ease-in-out relative group">
        Matches
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-gray-300 text-lg font-semibold hover:text-white dark:hover:text-gray-300 transition duration-300 ease-in-out relative group">
        <i class="fas fa-heart text-red-400 mr-2"></i>Explore
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-gray-300 text-lg font-semibold hover:text-white dark:hover:text-gray-300 transition duration-300 ease-in-out relative group">
        Messages
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
    </div>

    <!-- User Actions (Profile, Notifications, Menu Icon) -->
    <div class="flex items-center space-x-6">
      <!-- Notification Icon -->
      <div class="relative">
        <button class="text-white hover:text-purple-300 dark:hover:text-gray-400 transition duration-300 ease-in-out focus:outline-none">
          <svg class="h-7 w-7 md:h-8 md:w-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" clip-rule="evenodd" fill-rule="evenodd"></path>
          </svg>
        </button>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center p-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">3</span>
      </div>

      <!-- Profile Avatar -->
      <a href="#" class="block relative rounded-full group focus:outline-none focus:ring-2 focus:ring-white dark:focus:ring-gray-400">
        <img class="h-10 w-10 md:h-12 md:w-12 rounded-full object-cover border-2 border-white dark:border-gray-500 transform transition-transform duration-300 ease-in-out group-hover:scale-110" src="https://randomuser.me/api/portraits/women/42.jpg" alt="User Avatar">
      </a>

      <!-- Mobile Menu Button (Hamburger) -->
      <button class="md:hidden text-white focus:outline-none outline-none focus:ring-2 focus:ring-white dark:focus:ring-gray-400">
        <svg class="h-8 w-8" 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>
    </div>
  </div>
</nav>

Artistic_Sepia_Navigation_Bar

A simple, responsive navigation bar with a soft, artistic, sepia-toned aesthetic suitable for fashion and beauty brands, including dark mode support.

Open Preview

                <nav class="bg-amber-50 dark:bg-stone-900 border-b border-amber-100 dark:border-stone-700 font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex-shrink-0 flex items-center">
        <a href="#" class="text-amber-800 dark:text-amber-200 text-2xl font-bold font-serif tracking-wide">Lumière</a>
      </div>
      <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
        <a href="#" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-amber-700 dark:text-amber-300 hover:border-amber-300 hover:text-amber-900 dark:hover:border-amber-500 dark:hover:text-amber-100 transition duration-300 ease-in-out">
          Collections
        </a>
        <a href="#" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-amber-700 dark:text-amber-300 hover:border-amber-300 hover:text-amber-900 dark:hover:border-amber-500 dark:hover:text-amber-100 transition duration-300 ease-in-out">
          New Arrivals
        </a>
        <a href="#" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-amber-700 dark:text-amber-300 hover:border-amber-300 hover:text-amber-900 dark:hover:border-amber-500 dark:hover:text-amber-100 transition duration-300 ease-in-out">
          About Us
        </a>
        <a href="#" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-amber-700 dark:text-amber-300 hover:border-amber-300 hover:text-amber-900 dark:hover:border-amber-500 dark:hover:text-amber-100 transition duration-300 ease-in-out">
          Contact
        </a>
      </div>
      <div class="-mr-2 flex items-center sm:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-amber-600 dark:text-amber-400 hover:text-amber-900 dark:hover:text-amber-100 hover:bg-amber-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-amber-500 dark:focus:ring-amber-400" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <!-- Heroicon name: outline/menu -->
          <svg class="block 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>
          <!-- Icon when menu is open. -->
          <!-- Heroicon name: outline/x -->
          <svg class="hidden 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="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="sm:hidden" id="mobile-menu">
    <div class="pt-2 pb-3 space-y-1">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-stone-800 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300 ease-in-out">
        Collections
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-stone-800 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300 ease-in-out">
        New Arrivals
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-stone-800 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300 ease-in-out">
        About Us
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-stone-800 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300 ease-in-out">
        Contact
      </a>
    </div>
  </div>
</nav>

Neon_Glow_Navbar_Music_Audio

A complex, responsive navigation bar component for music/audio platforms, featuring neon/glow effects and a warm neutral color scheme. Includes dark mode support and interactive elements.

Open Preview

                <nav class="bg-gradient-to-r from-stone-100 to-amber-50 dark:from-stone-900 dark:to-orange-950/50 shadow-lg px-4 py-3 md:py-4 transition-all duration-300">
  <div class="container mx-auto flex items-center justify-between flex-wrap">
    <!-- Logo and Home Link -->
    <div class="flex items-center flex-shrink-0 text-stone-800 dark:text-orange-100 mr-6">
      <svg class="fill-current h-8 w-8 mr-2 drop-shadow-[0_0_5px_rgba(251,191,36,0.7)] dark:drop-shadow-[0_0_8px_rgba(253,186,116,0.9)]" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 3a9 9 0 00-9 9c0 4.97 4.03 9 9 9s9-4.03 9-9a9 9 0 00-9-9zm0 16a7 7 0 110-14 7 7 0 010 14zM12 8a1 1 0 00-1 1v4a1 1 0 002 0V9a1 1 0 00-1-1z"/>
      </svg>
      <span class="font-black text-xl tracking-tight text-stone-800 dark:text-orange-100 drop-shadow-[0_0_5px_rgba(251,191,36,0.7)] dark:drop-shadow-[0_0_8px_rgba(253,186,116,0.9)]">Pulse<span class="text-orange-400 dark:text-amber-300">Tune</span></span>
    </div>

    <!-- Mobile Menu Button -->
    <div class="block lg:hidden">
      <button class="flex items-center px-3 py-2 border rounded text-stone-500 border-stone-400 hover:text-orange-600 hover:border-orange-600 dark:text-orange-300 dark:border-orange-400 dark:hover:text-amber-500 dark:hover:border-amber-500 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-amber-400 group">
        <svg class="fill-current h-3 w-3 drop-shadow-[0_0_3px_rgba(251,191,36,0.7)] dark:drop-shadow-[0_0_5px_rgba(253,186,116,0.9)] group-hover:text-orange-600 dark:group-hover:text-amber-500" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
      </button>
    </div>

    <!-- Nav Links (hidden by default on mobile, shown on large screens) -->
    <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden transition-all duration-300" data-target-id="navbar-menu">
      <div class="text-sm lg:flex-grow mt-4 lg:mt-0">
        <a href="#" class="block mt-4 lg:inline-block lg:mt-0 px-4 py-2 text-stone-700 dark:text-orange-200 hover:text-orange-600 dark:hover:text-amber-400 mr-4 font-medium transition-colors duration-200 relative group">
          Home
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 dark:bg-amber-300 origin-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100 glow-on-hover"></span>
        </a>
        <a href="#" class="block mt-4 lg:inline-block lg:mt-0 px-4 py-2 text-stone-700 dark:text-orange-200 hover:text-orange-600 dark:hover:text-amber-400 mr-4 font-medium transition-colors duration-200 relative group">
          Browse
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 dark:bg-amber-300 origin-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100 glow-on-hover"></span>
        </a>
        <a href="#" class="block mt-4 lg:inline-block lg:mt-0 px-4 py-2 text-stone-700 dark:text-orange-200 hover:text-orange-600 dark:hover:text-amber-400 mr-4 font-medium transition-colors duration-200 relative group">
          Playlists
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 dark:bg-amber-300 origin-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100 glow-on-hover"></span>
        </a>
        <a href="#" class="block mt-4 lg:inline-block lg:mt-0 px-4 py-2 text-stone-700 dark:text-orange-200 hover:text-orange-600 dark:hover:text-amber-400 font-medium transition-colors duration-200 relative group">
          Radio
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 dark:bg-amber-300 origin-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100 glow-on-hover"></span>
        </a>
      </div>

      <!-- Search Bar and User Profile -->
      <div class="flex items-center mt-4 lg:mt-0 space-x-4">
        <!-- Search Bar -->
        <div class="relative">
          <input type="text" placeholder="Search music..." class="bg-stone-50 dark:bg-orange-900 border border-stone-300 dark:border-orange-800 rounded-full py-2 pl-10 pr-4 text-sm text-stone-800 dark:text-orange-100 focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-amber-300 focus:border-transparent transition-all duration-200 shadow-sm drop-shadow-[0_0_3px_rgba(251,191,36,0.3)] dark:drop-shadow-[0_0_6px_rgba(253,186,116,0.6)]">
          <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-stone-400 dark:text-orange-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </div>

        <!-- User Profile Dropdown -->
        <div class="relative group">
          <button class="flex items-center space-x-2 text-stone-700 dark:text-orange-200 focus:outline-none">
            <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-9 h-9 rounded-full border-2 border-orange-400 dark:border-amber-300 glow-on-pfp transition-transform duration-200 hover:scale-105">
            <span class="hidden md:block font-medium text-sm text-stone-700 dark:text-orange-200">Jane Doe</span>
            <svg class="h-4 w-4 ml-1 text-stone-500 dark:text-orange-300 group-hover:rotate-180 transition-transform duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </button>
          <!-- Dropdown Menu -->
          <div class="absolute right-0 mt-2 w-48 bg-stone-50 dark:bg-orange-900 rounded-md shadow-lg py-1 z-20 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform scale-95 group-hover:scale-100 origin-top-right border border-stone-200 dark:border-orange-850">
            <a href="#" class="block px-4 py-2 text-sm text-stone-700 dark:text-orange-200 hover:bg-stone-100 dark:hover:bg-orange-800 transition-colors duration-200">Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-stone-700 dark:text-orange-200 hover:bg-stone-100 dark:hover:bg-orange-800 transition-colors duration-200">Settings</a>
            <div class="border-t border-stone-200 dark:border-orange-800 my-1"></div>
            <a href="#" class="block px-4 py-2 text-sm text-stone-700 dark:text-orange-200 hover:bg-stone-100 dark:hover:bg-orange-800 transition-colors duration-200">Sign Out</a>
          </div>
        </div>

        <!-- Dark Mode Toggle -->
        <button id="dark-mode-toggle" aria-label="Toggle dark mode" class="p-2 rounded-full text-stone-600 dark:text-orange-300 bg-stone-100 dark:bg-orange-800 hover:bg-stone-200 dark:hover:bg-orange-700 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-amber-300 drop-shadow-[0_0_3px_rgba(251,191,36,0.3)] dark:drop-shadow-[0_0_6px_rgba(253,186,116,0.6)]">
          <svg class="h-5 w-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
          </svg>
          <svg class="h-5 w-5 dark:hidden" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.459 4.368A5.99 5.99 0 0110 18a5.99 5.99 0 01-4.541-2.368l-.707.707a1 1 0 001.414 1.414L10 18.414l3.828 3.828a1 1 0 001.414-1.414l-.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM2 10a1 1 0 011-1h1a1 1 0 110 2H3a1 1 0 01-1-1zm15.364 6.364l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4.636 4.636l-.707-.707a1 1 0 011.414-1.414l.707.707a1 1 0 01-1.414 1.414z"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

<style>
  /* This CSS is for demonstration of glow effects where Tailwind classes aren't sufficient. */
  /* In a real project, consider integrating these via plugins if needed or as direct CSS for unique effects. */
  .glow-on-hover {
    box-shadow: 0 0 5px rgba(251, 191, 36, 0.5), 0 0 10px rgba(251, 191, 36, 0.3);
    transition: all 0.3s ease-in-out;
  }
  .dark .glow-on-hover {
    box-shadow: 0 0 8px rgba(253, 186, 116, 0.7), 0 0 15px rgba(253, 186, 116, 0.5);
  }
  .group:hover .glow-on-hover {
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.8), 0 0 15px rgba(251, 191, 36, 0.5);
  }
  .dark .group:hover .glow-on-hover {
    box-shadow: 0 0 10px rgba(253, 186, 116, 0.9), 0 0 20px rgba(253, 186, 116, 0.7);
  }

  .glow-on-pfp {
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
  }
  .dark .glow-on-pfp {
    box-shadow: 0 0 10px rgba(253, 186, 116, 0.8);
  }
  .dark .glow-on-pfp {
     filter: drop-shadow(0 0 8px rgba(253, 186, 116, 0.8));
  }

  /* Basic JS for mobile menu and dark mode toggle */
  /* Add this script in your actual HTML, likely at the end of body */
  /*
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const mobileMenuButton = document.querySelector('button[aria-label="Toggle navigation"]');
      const navbarMenu = document.querySelector('[data-target-id="navbar-menu"]');

      if (mobileMenuButton && navbarMenu) {
        mobileMenuButton.addEventListener('click', () => {
          navbarMenu.classList.toggle('hidden');
        });
      }

      const darkModeToggle = document.getElementById('dark-mode-toggle');
      if (darkModeToggle) {
        darkModeToggle.addEventListener('click', () => {
          document.documentElement.classList.toggle('dark');
          localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
        });

        // Check for saved theme in localStorage
        if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
          document.documentElement.classList.add('dark');
        } else {
          document.documentElement.classList.remove('dark');
        }
      }
    });
  </script>
  */
</style>

Cyberpunk_Retro_Food_Navbar

A simple, responsive navigation bar with cyberpunk-retro aesthetics, designed for food/restaurant websites. Features dark background, muted accent colors, and dark mode support.

Open Preview

                <nav class="bg-zinc-900 shadow-lg p-4 font-mono dark:bg-zinc-950">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Logo/Brand Name -->
    <a href="#" class="text-orange-400 text-2xl font-bold tracking-wider uppercase hover:text-orange-300 transition-colors duration-300 transform hover:scale-105">
      <span class="text-teal-400">&lt;</span>Bite<span class="text-teal-400">/&gt;</span>Stream
    </a>

    <!-- Mobile Menu Button -->
    <div class="md:hidden">
      <button class="text-gray-300 hover:text-orange-400 focus:outline-none focus:text-orange-400 dark:text-gray-400 dark:hover:text-orange-300">
        <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 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors duration-300 text-lg">
        Menu
      </a>
      <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors duration-300 text-lg">
        Orders
      </a>
      <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors duration-300 text-lg">
        About
      </a>
      <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors duration-300 text-lg">
        Contact
      </a>
      <a href="#" class="bg-teal-600 text-white px-4 py-1 rounded-md text-lg hover:bg-teal-500 transition-colors duration-300 neon-button">
        Sign In
      </a>
    </div>
  </div>
</nav>

Navigation Bar Component

A complex, responsive navigation bar component designed with a paper/print-inspired aesthetic and jewel-tone color scheme, suitable for agriculture/farming websites. Includes dark mode support and multiple interactive elements.

Open Preview

                <header class="bg-emerald-700 font-serif shadow-xl dark:bg-emerald-950">
  <nav class="container mx-auto px-4 py-3 md:flex md:items-center md:justify-between">
    <div class="flex items-center justify-between">
      <a href="#" class="flex items-center text-2xl font-bold text-white transition duration-300 ease-in-out hover:text-emerald-200 dark:text-emerald-50 dark:hover:text-emerald-300">
        <img src="https://picsum.photos/id/1084/40/40" alt="Farm Logo" class="mr-2 rounded-full border-2 border-emerald-500 shadow-md dark:border-emerald-700">
        AgriConnect
      </a>
      <button class="peer rounded-md p-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-400 md:hidden" type="button" aria-label="Toggle navigation">
        <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>
    </div>

    <div class="relative hidden flex-col transition-all duration-500 ease-in-out peer-focus:flex md:flex md:flex-row md:items-center md:space-x-8 lg:space-x-12">
      <a href="#" class="block rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 dark:hover:bg-emerald-800 dark:hover:text-emerald-200" aria-current="page">Home</a>
      
      <div class="group relative">
        <button class="flex items-center rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 focus:outline-none dark:hover:bg-emerald-800 dark:hover:text-emerald-200" type="button">
          Products
          <svg class="ml-2 h-4 w-4 transform transition-transform duration-300 ease-in-out group-hover:rotate-180" 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="M19 9l-7 7-7-7"></path></svg>
        </button>
        <div class="absolute left-0 top-full hidden w-48 origin-top-right scale-y-0 transform rounded-md bg-emerald-600 shadow-lg transition-all duration-300 ease-in-out group-hover:scale-y-100 group-hover:block dark:bg-emerald-800">
          <a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Seeds & Grains</a>
          <a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Fertilizers</a>
          <a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Equipment</a>
        </div>
      </div>

      <div class="group relative">
        <button class="flex items-center rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 focus:outline-none dark:hover:bg-emerald-800 dark:hover:text-emerald-200" type="button">
          Services
          <svg class="ml-2 h-4 w-4 transform transition-transform duration-300 ease-in-out group-hover:rotate-180" 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="M19 9l-7 7-7-7"></path></svg>
        </button>
        <div class="absolute left-0 top-full hidden w-48 origin-top-right scale-y-0 transform rounded-md bg-emerald-600 shadow-lg transition-all duration-300 ease-in-out group-hover:scale-y-100 group-hover:block dark:bg-emerald-800">
          <a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Consultation</a>
          <a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Soil Testing</a>
          <a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Logistics</a>
        </div>
      </div>

      <a href="#" class="block rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 dark:hover:bg-emerald-800 dark:hover:text-emerald-200">Resources</a>
      <a href="#" class="block rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 dark:hover:bg-emerald-800 dark:hover:text-emerald-200">About Us</a>
      <a href="#" class="block rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 dark:hover:bg-emerald-800 dark:hover:text-emerald-200">Contact</a>

      <div class="space-x-4 md:pl-4">
        <button class="rounded-full bg-emerald-500 px-4 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-300 dark:bg-emerald-700 dark:hover:bg-emerald-600" type="button">
          <svg class="inline-block h-5 w-5 align-text-bottom" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 001 1h14a1 1 0 001-1V4a1 1 0 00-1-1H3zm2 1.5a.5.5 0 01.5-.5h9a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-9a.5.5 0 01-.5-.5v-1zM5.5 9a.5.5 0 000 1h9a.5.5 0 000-1h-9z" clip-rule="evenodd"></path></svg>
          Dashboard
        </button>
      </div>
    </div>
  </nav>
</header>

3D_Corporate_Blues_Food_Restaurant_Nav

A complex, 3D-inspired navigation bar for food/restaurant websites, featuring corporate blues and full responsiveness with dark mode support. Incorporates elements like a logo, navigation links, search bar, user avatar, and cart.

Open Preview

                <nav class="bg-gradient-to-r from-blue-600 to-blue-800 dark:from-gray-900 dark:to-gray-950 shadow-lg relative z-50 transform skew-y-1 -translate-y-1 overflow-visible md:skew-y-0 md:translate-y-0">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 relative z-10 transform -skew-y-1 md:skew-y-0">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <a href="#" class="flex-shrink-0 flex items-center group">
          <div class="w-10 h-10 bg-blue-400 dark:bg-blue-600 rounded-full flex items-center justify-center shadow-md transform transition-transform duration-300 group-hover:scale-110 group-hover:rotate-12">
            <svg class="h-6 w-6 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.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M16.364 18.364l.707.707M12 21v-1m-6.364-1.636l-.707.707M3 12H2m1.636-6.364l.707-.707M10 11h4l-1 5v5h-2v-5l-1-5z"></path>
            </svg>
          </div>
          <span class="ml-3 text-white text-2xl font-extrabold tracking-tight transform transition-transform duration-300 group-hover:px-2 group-hover:-translate-x-1">Food<span class="text-blue-200 dark:text-blue-400">Express</span></span>
        </a>
      </div>

      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-8">
          <a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-700 dark:hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-lg font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 shadow-md flex items-center group relative overflow-hidden">
            <div class="absolute inset-0 bg-blue-500 dark:bg-gray-800 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
            <span class="z-10">Home</span>
          </a>
          <a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-700 dark:hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 shadow-md flex items-center group relative overflow-hidden">
            <div class="absolute inset-0 bg-blue-500 dark:bg-gray-800 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
            <span class="z-10">Restaurants</span>
          </a>
          <a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-700 dark:hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 shadow-md flex items-center group relative overflow-hidden">
            <div class="absolute inset-0 bg-blue-500 dark:bg-gray-800 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
            <span class="z-10">Deals</span>
          </a>
          <a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-700 dark:hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 shadow-md flex items-center group relative overflow-hidden">
            <div class="absolute inset-0 bg-blue-500 dark:bg-gray-800 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
            <span class="z-10">Contact</span>
          </a>
        </div>
      </div>

      <div class="hidden md:flex items-center ml-auto space-x-6">
        <div class="relative w-64">
          <input type="text" placeholder="Search food or restaurants..." class="w-full pl-10 pr-4 py-2 rounded-full bg-blue-700 dark:bg-gray-800 text-white placeholder-blue-200 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-gray-600 shadow-inner 3d-inset-shadow transition-all duration-300 focus:w-72">
          <svg class="h-5 w-5 absolute left-3 top-1/2 -translate-y-1/2 text-blue-300 dark:text-gray-500" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </div>
        <button class="p-2 rounded-full bg-blue-700 dark:bg-gray-800 text-blue-200 dark:text-gray-400 hover:text-white hover:bg-blue-600 dark:hover:bg-gray-700 transition shadow-md transform hover:scale-110 relative 3d-button-raised">
          <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
          <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 dark:text-red-900 transform translate-x-1/2 -translate-y-1/2 bg-red-500 dark:bg-red-400 rounded-full shadow-lg">3</span>
        </button>
        <div class="relative group">
          <button class="flex items-center p-1 rounded-full bg-blue-700 dark:bg-gray-800 text-blue-200 dark:text-gray-400 hover:text-white hover:bg-blue-600 dark:hover:bg-gray-700 transition transform hover:scale-110 shadow-md 3d-button-raised">
            <img class="h-8 w-8 rounded-full border-2 border-blue-400 dark:border-gray-600 object-cover" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
            <span class="ml-2 text-white font-medium hidden lg:block">Emily R.</span>
            <svg class="ml-1 mr-1 h-5 w-5 text-blue-300 dark:text-gray-500" 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="M19 9l-7 7-7-7"></path>
            </svg>
          </button>
          <div class="hidden group-hover:block absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-xl py-1 transform translate-z-10 transition-all duration-300 opacity-0 group-hover:opacity-100 group-hover:translate-y-0 translate-y-2 dark:shadow-light-md-reverse">
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-gray-700">Your Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-gray-700">Settings</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-gray-700">Sign out</a>
          </div>
        </div>
      </div>

      <div class="-mr-2 flex md:hidden">
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-blue-200 dark:text-gray-400 hover:text-white hover:bg-blue-700 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-800 dark:focus:ring-offset-gray-900 focus:ring-white transition shadow-lg 3d-button-raised" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <svg class="block 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>
          <svg class="hidden 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="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-blue-700 dark:bg-gray-900 border-t border-blue-600 dark:border-gray-800 shadow-inner transform translate-z-neg-10 z-0">
      <a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 shadow-sm">Home</a>
      <a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 shadow-sm">Restaurants</a>
      <a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 shadow-sm">Deals</a>
      <a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 shadow-sm">Contact</a>
      <div class="border-t border-blue-500 dark:border-gray-700 my-2 pt-2"></div>
      <div class="relative mt-4">
        <input type="text" placeholder="Search..." class="w-full pl-10 pr-4 py-2 rounded-full bg-blue-600 dark:bg-gray-800 text-white placeholder-blue-300 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-gray-600 shadow-inner 3d-inset-shadow">
        <svg class="h-5 w-5 absolute left-3 top-1/2 -translate-y-1/2 text-blue-400 dark:text-gray-500" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
      <button class="flex items-center justify-between w-full px-3 py-2 rounded-md text-blue-100 dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 transition shadow-sm 3d-button-raised mt-2">
        <div class="flex items-center">
          <svg class="h-6 w-6 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
          <span>Cart</span>
        </div>
        <span class="px-2 py-1 text-xs font-bold leading-none text-red-100 dark:text-red-900 bg-red-500 dark:bg-red-400 rounded-full shadow-lg">3</span>
      </button>
      <div class="flex items-center px-3 py-2 mt-2">
        <img class="h-9 w-9 rounded-full border-2 border-blue-400 dark:border-gray-600 object-cover mr-3" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
        <div>
          <p class="text-white font-medium">Emily R.</p>
          <a href="#" class="text-blue-200 dark:text-gray-400 hover:text-white text-sm">View Profile</a>
        </div>
      </div>
    </div>
  </div>
  <style>
    /* Custom 3D-like shadows for a more pronounced effect */
    .3d-inset-shadow {
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -2px 4px rgba(255, 255, 255, 0.1);
    }
    .dark .3d-inset-shadow {
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 -2px 4px rgba(255, 255, 255, 0.05);
    }
    .3d-button-raised {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15);
    }
    .dark .3d-button-raised {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25);
    }
    .shadow-light-md-reverse {
      box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
    }
    .dark .shadow-light-md-reverse {
      box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.3), 0 -2px 4px -1px rgba(0, 0, 0, 0.1);
    }
    /* Further minor adjustments for 3D depth, usually handled well by transform properties */
    .translate-z-10 {
      transform: translateZ(10px) translateY(0);
    }
    .translate-z-neg-10 {
      transform: translateZ(-10px);
    }
  </style>
</nav>

Gradient/Color Transitions Grayscale Dashboard Navigation Bar

A complex, responsive navigation bar for a dashboard, featuring gradient transitions in a grayscale color scheme. Includes multiple interactive elements and full dark mode support.

Open Preview

                <nav class="bg-white shadow-lg transition-colors duration-300 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
  <div class="mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <a href="#" class="text-2xl font-bold bg-gradient-to-r from-gray-700 to-black text-transparent bg-clip-text dark:from-gray-300 dark:to-gray-100 dark:bg-opacity-75 transition-all duration-300">Dashboard</a>
        </div>
        <div class="hidden md:block">
          <div class="ml-10 flex items-baseline space-x-4">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Overview</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Analytics</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Reports</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Settings</a>
          </div>
        </div>
      </div>

      <div class="hidden md:block">
        <div class="ml-4 flex items-center md:ml-6">
          <button type="button" class="relative p-1 rounded-full text-gray-400 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:text-gray-300 dark:hover:text-white dark:focus:ring-offset-gray-800 dark:focus:ring-gray-400 transition-colors duration-200">
            <span class="absolute -inset-1.5"></span>
            <span class="sr-only">View notifications</span>
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.8-3.003V12m0 8.25v-1.5m0-1.5V12m0 0a2.25 2.25 0 00-2.25 2.25V18a2.25 2.25 0 002.25 2.25h.75m0-4.5h-.75m-.75 0h-.75m-3.93-1.071c.42-.872 1.05-1.56 1.79-2.07c.74-.51 1.57-.79 2.44-.79h.75m0 0v-2.25m0 2.25h.75m0 0c.974 0 1.905-.275 2.722-.764m0 0A6.5 6.5 0 0012 2.25 6.5 6.5 0 006 8.25c0 1.62-.516 3.12-1.39 4.34m0 0L4.5 14.25m15 0a.75.75 0 00.75-.75L21 12.75l-.75-1.5a.75.75 0 00-.75-.75H3.75a.75.75 0 00-.75.75L3 12.75l.75 1.5a.75.75 0 00.75.75h15z" />
            </svg>
          </button>

          <div class="relative ml-3 group">
            <button type="button" class="relative flex max-w-xs items-center rounded-full bg-white dark:bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 dark:focus:ring-gray-400 transition-colors duration-200" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
              <span class="absolute -inset-1.5"></span>
              <span class="sr-only">Open user menu</span>
              <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            </button>
            <div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-gray-800 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 scale-95 group-hover:scale-100" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
              <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
            </div>
          </div>

          <!-- Dark Mode Toggle (Conceptual - requires JS for functionality) -->
          <button type="button" class="ml-4 p-1 rounded-full text-gray-400 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:text-gray-300 dark:hover:text-white dark:focus:ring-offset-gray-800 dark:focus:ring-gray-400 transition-colors duration-200" aria-label="Toggle dark mode">
            <svg class="h-6 w-6 dark:hidden" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-1.033 0-2.049-.154-3-.443m-4.321 4.75A9.704 9.704 0 0012 21.75c1.033 0 2.049-.154 3-.443m-4.321-4.75a9.704 9.704 0 01-3-.443m-4.321-4.75a9.704 9.704 0 01-3-.443M2.25 12A9.704 9.704 0 015.25 11.25c1.033 0 2.049.154 3 .443m4.321-4.75a9.704 9.704 0 013-.443m4.321-4.75a9.704 9.704 0 013-.443" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 21.75c1.033 0 2.049-.154 3-.443m-4.321-4.75a9.704 9.704 0 01-3-.443M2.25 12A9.704 9.704 0 015.25 11.25c1.033 0 2.049.154 3 .443m4.321-4.75a9.704 9.704 0 013-.443m4.321-4.75a9.704 9.704 0 013-.443m-4.321-4.75a9.704 9.704 0 01-3-.443M21 12.75a9.704 9.704 0 01-3 .443m-4.321 4.75a9.704 9.704 0 01-3-.443" />
              <circle cx="12" cy="12" r="8" stroke="currentColor" stroke-fill="none" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 7.5l9 9M7.5 16.5l9-9" />
            </svg>
            <svg class="h-6 w-6 hidden dark:block" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-1.033 0-2.049-.154-3-.443m-4.321 4.75A9.704 9.704 0 0012 21.75c1.033 0 2.049-.154 3-.443m-4.321-4.75a9.704 9.704 0 01-3-.443m-4.321-4.75a9.704 9.704 0 01-3-.443M2.25 12A9.704 9.704 0 015.25 11.25c1.033 0 2.049.154 3 .443m4.321-4.75a9.704 9.704 0 013-.443m4.321-4.75a9.704 9.704 0 013-.443m-4.321-4.75a9.704 9.704 0 01-3-.443M21 12.75a9.704 9.704 0 01-3 .443m-4.321 4.75a9.704 9.704 0 01-3-.443" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v18M3 12h18A9.704 9.704 0 0112 2.25c-1.033 0-2.049.154-3 .443M21.75 3.75v16.5A.75.75 0 0121 21.75H3a.75.75 0 01-.75-.75V3.75a.75.75 0 01.75-.75h18z" />
            </svg>
          </button>
        </div>
      </div>

      <div class="-mr-2 flex md:hidden">
        <button type="button" class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-500 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-400 transition-colors duration-200" aria-controls="mobile-menu" aria-expanded="false">
          <span class="absolute -inset-0.5"></span>
          <span class="sr-only">Open main menu</span>
          <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
          </svg>
          <svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden hidden" id="mobile-menu">
    <div class="space-y-1 px-2 pb-3 pt-2 sm:px-3">
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-200">Overview</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-200">Analytics</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-200">Reports</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-200">Settings</a>
    </div>
    <div class="border-t border-gray-200 pb-3 pt-4 dark:border-gray-700">
      <div class="flex items-center px-5">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium leading-none text-gray-800 dark:text-gray-200">John Doe</div>
          <div class="text-sm font-medium leading-none text-gray-500 dark:text-gray-400">john.doe@example.com</div>
        </div>
        <button type="button" class="relative ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-800 dark:text-gray-300 dark:hover:text-white dark:focus:ring-offset-gray-700 dark:focus:ring-gray-400 transition-colors duration-200">
          <span class="absolute -inset-1.5"></span>
          <span class="sr-only">View notifications</span>
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.8-3.003V12m0 8.25v-1.5m0-1.5V12m0 0a2.25 2.25 0 00-2.25 2.25V18a2.25 2.25 0 002.25 2.25h.75m0-4.5h-.75m-.75 0h-.75m-3.93-1.071c.42-.872 1.05-1.56 1.79-2.07c.74-.51 1.57-.79 2.44-.79h.75m0 0v-2.25m0 2.25h.75m0 0c.974 0 1.905-.275 2.722-.764m0 0A6.5 6.5 0 0012 2.25 6.5 6.5 0 006 8.25c0 1.62-.516 3.12-1.39 4.34m0 0L4.5 14.25m15 0a.75.75 0 00.75-.75L21 12.75l-.75-1.5a.75.75 0 00-.75-.75H3.75a.75.75 0 00-.75.75L3 12.75l.75 1.5a.75.75 0 00.75.75h15z" />
          </svg>
        </button>
      </div>
      <div class="mt-3 space-y-1 px-2">
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white transition-colors duration-200">Your Profile</a>
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white transition-colors duration-200">Settings</a>
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white transition-colors duration-200">Sign out</a>
      </div>
    </div>
  </div>
</nav>

LuxuryTravelNavBar

A simple, elegant navigation bar component for travel and tourism websites, featuring luxury earth tones, responsive design, and dark mode support.

Open Preview

                <header class="bg-stone-100 dark:bg-stone-900 shadow-sm font-serif text-stone-800 dark:text-stone-200">
  <div class="container mx-auto px-4 py-4 md:py-6 flex justify-between items-center">
    <a href="#" class="text-2xl md:text-3xl font-bold tracking-wide transition-colors duration-300 hover:text-stone-600 dark:hover:text-stone-400">
      Voyage Lux
    </a>

    <!-- Desktop Navigation -->
    <nav class="hidden md:flex space-x-8 lg:space-x-12">
      <a href="#destinations" class="text-lg relative group transition-colors duration-300 hover:text-stone-600 dark:hover:text-stone-400">
        Destinations
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-stone-800 dark:bg-stone-200 origin-bottom-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100"></span>
      </a>
      <a href="#journeys" class="text-lg relative group transition-colors duration-300 hover:text-stone-600 dark:hover:text-stone-400">
        Journeys
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-stone-800 dark:bg-stone-200 origin-bottom-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100"></span>
      </a>
      <a href="#about" class="text-lg relative group transition-colors duration-300 hover:text-stone-600 dark:hover:text-stone-400">
        About Us
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-stone-800 dark:bg-stone-200 origin-bottom-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100"></span>
      </a>
      <a href="#contact" class="text-lg relative group transition-colors duration-300 hover:text-stone-600 dark:hover:text-stone-400">
        Contact
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-stone-800 dark:bg-stone-200 origin-bottom-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100"></span>
      </a>
    </nav>

    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button id="mobile-menu-button" class="text-stone-800 dark:text-stone-200 focus:outline-none">
        <svg class="w-8 h-8" 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>
    </div>
  </div>

  <!-- Mobile Menu (Hidden by default, show with JS) -->
  <nav id="mobile-menu" class="hidden md:hidden bg-stone-50 dark:bg-stone-800 py-4 shadow-inner">
    <div class="flex flex-col items-center space-y-4">
      <a href="#destinations" class="block text-lg text-stone-800 dark:text-stone-200 px-4 py-2 hover:bg-stone-200 dark:hover:bg-stone-700 w-full text-center transition-colors duration-300">Destinations</a>
      <a href="#journeys" class="block text-lg text-stone-800 dark:text-stone-200 px-4 py-2 hover:bg-stone-200 dark:hover:bg-stone-700 w-full text-center transition-colors duration-300">Journeys</a>
      <a href="#about" class="block text-lg text-stone-800 dark:text-stone-200 px-4 py-2 hover:bg-stone-200 dark:hover:bg-stone-700 w-full text-center transition-colors duration-300">About Us</a>
      <a href="#contact" class="block text-lg text-stone-800 dark:text-stone-200 px-4 py-2 hover:bg-stone-200 dark:hover:bg-stone-700 w-full text-center transition-colors duration-300">Contact</a>
    </div>
  </nav>
</header>

<!-- Simple JavaScript to toggle mobile menu (for demonstration, not part of strict HTML/Tailwind only) -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('mobile-menu-button');
    const menu = document.getElementById('mobile-menu');

    if (button && menu) {
      button.addEventListener('click', () => {
        menu.classList.toggle('hidden');
      });
    }
  });
</script>

Artsy_Neon_Crypto_Navbar

A complex, responsive navigation bar for cryptocurrency/blockchain applications with an artistic, watercolor-inspired design and a bright, neon color scheme. Includes dark mode support and interactive elements.

Open Preview

                <header class="w-full bg-gradient-to-br from-purple-900 via-pink-800 to-indigo-900 bg-[length:200%_200%] animate-gradient-xy shadow-xl dark:from-gray-950 dark:via-gray-800 dark:to-black transition-colors duration-500">
  <div class="container mx-auto px-4 py-4 md:py-6 flex justify-between items-center relative z-10">
    <!-- Logo/Brand Name -->
    <a href="#" class="flex items-center space-x-2">
      <svg class="w-8 h-8 md:w-10 md:h-10 text-lime-400 drop-shadow-[0_0_8px_rgba(163,230,53,0.7)] transform transition-transform duration-300 hover:scale-110" 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.75-3M3 13l3-3m0 0l3-3m-3 3h12m0 0l3 3m0-3l-3-3m-8.5 6h.5a2 2 0 012 2v2a2 2 0 01-2 2h-.5a2 2 0 01-2-2v-2a2 2 0 012-2zM9 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
      </svg>
      <span class="text-3xl md:text-4xl font-extrabold text-white tracking-wider drop-shadow-md text-transparent bg-clip-text bg-gradient-to-r from-lime-400 to-cyan-400 dark:from-yellow-300 dark:to-purple-300 transition-colors duration-500">QuantumLedger</span>
    </a>

    <!-- Desktop Navigation -->
    <nav class="hidden lg:flex space-x-8 xl:space-x-12 items-center">
      <a href="#" class="text-lg font-semibold text-white px-3 py-2 rounded-lg relative overflow-hidden group transition-all duration-300 transform hover:-translate-y-0.5">
        <span class="relative z-10 text-shadow-neon group-hover:text-cyan-300 dark:group-hover:text-fuchsia-300 transition-colors duration-300">Dashboard</span>
        <span class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-indigo-600 opacity-0 group-hover:opacity-30 rounded-lg blur-sm transition-opacity duration-300"></span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-pink-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="text-lg font-semibold text-white px-3 py-2 rounded-lg relative overflow-hidden group transition-all duration-300 transform hover:-translate-y-0.5">
        <span class="relative z-10 text-shadow-neon group-hover:text-cyan-300 dark:group-hover:text-fuchsia-300 transition-colors duration-300">Transactions</span>
        <span class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-indigo-600 opacity-0 group-hover:opacity-30 rounded-lg blur-sm transition-opacity duration-300"></span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-pink-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="text-lg font-semibold text-white px-3 py-2 rounded-lg relative overflow-hidden group transition-all duration-300 transform hover:-translate-y-0.5">
        <span class="relative z-10 text-shadow-neon group-hover:text-cyan-300 dark:group-hover:text-fuchsia-300 transition-colors duration-300">Portfolio</span>
        <span class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-indigo-600 opacity-0 group-hover:opacity-30 rounded-lg blur-sm transition-opacity duration-300"></span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-pink-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <div class="relative group">
        <button class="text-lg font-semibold text-white px-3 py-2 rounded-lg flex items-center space-x-1 relative overflow-hidden group transition-all duration-300 transform hover:-translate-y-0.5">
          <span class="relative z-10 text-shadow-neon group-hover:text-cyan-300 dark:group-hover:text-fuchsia-300 transition-colors duration-300">Tools</span>
          <svg class="w-4 h-4 ml-1 text-white group-hover:text-cyan-300 transition-colors duration-300" 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="M19 9l-7 7-7-7"></path></svg>
          <span class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-indigo-600 opacity-0 group-hover:opacity-30 rounded-lg blur-sm transition-opacity duration-300"></span>
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-pink-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        </button>
        <div class="absolute hidden group-hover:block top-full left-1/2 -translate-x-1/2 mt-3 p-2 bg-gradient-to-br from-purple-800/90 to-indigo-800/90 dark:from-gray-900/90 dark:to-black/90 backdrop-blur-md rounded-xl shadow-lg border border-lime-400/30 min-w-[160px]">
          <a href="#" class="block px-4 py-2 text-white text-md font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">Staking</a>
          <a href="#" class="block px-4 py-2 text-white text-md font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">NFTs</a>
          <a href="#" class="block px-4 py-2 text-white text-md font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">Analytics</a>
        </div>
      </div>
      <a href="#" class="text-lg font-semibold text-white px-3 py-2 rounded-lg relative overflow-hidden group transition-all duration-300 transform hover:-translate-y-0.5">
        <span class="relative z-10 text-shadow-neon group-hover:text-cyan-300 dark:group-hover:text-fuchsia-300 transition-colors duration-300">Support</span>
        <span class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-indigo-600 opacity-0 group-hover:opacity-30 rounded-lg blur-sm transition-opacity duration-300"></span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-pink-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
    </nav>

    <!-- User Controls & Mobile Toggle -->
    <div class="flex items-center space-x-4 md:space-x-6">
      <button aria-label="search" class="text-white hover:text-cyan-400 transition-colors duration-200 hidden md:block">
        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      </button>

      <button aria-label="Toggle Dark Mode" class="focus:outline-none text-white hover:text-cyan-400 dark:hover:text-yellow-300 transition-colors duration-300" onclick="document.documentElement.classList.toggle('dark')">
        <svg class="w-6 h-6 hidden dark:block" 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 3v1m0 16v1m9-9h1M3 12H2m8.006-7.39l.71-.71m-1.42 1.42l-.71-.71M19.004 4.39l.71.71m-1.42-1.42l-.71.71M18 12a6 6 0 11-12 0 6 6 0 0112 0z"></path></svg>
        <svg class="w-6 h-6 dark:hidden" 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 aria-label="user profile" class="hidden sm:inline-flex items-center space-x-2 bg-gradient-to-r from-lime-500 to-pink-500 hover:from-lime-400 hover:to-pink-400 dark:from-yellow-400 dark:to-purple-500 dark:hover:from-yellow-300 dark:hover:to-purple-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105 active:scale-95">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-white/50 shadow-md">
        <span class="hidden md:block">John Doe</span>
      </button>

      <!-- Mobile Toggle Button -->
      <button id="mobile-menu-button" class="lg:hidden focus:outline-none text-white hover:text-cyan-400 dark:hover:text-fuchsia-300 transition-colors duration-300 z-20" aria-label="Open mobile menu">
        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path id="menu-icon-open" class="block" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          <path id="menu-icon-close" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu Overlay -->
  <div id="mobile-menu" class="hidden lg:hidden fixed inset-0 bg-gradient-to-br from-purple-900/95 via-pink-800/95 to-indigo-900/95 dark:from-gray-950/95 dark:via-gray-800/95 dark:to-black/95 z-40 flex flex-col items-center justify-center space-y-8 animate-fade-in-down transition-opacity duration-300 pointer-events-none opacity-0">
    <nav class="flex flex-col space-y-6 text-center">
      <a href="#" class="text-3xl font-extrabold text-white text-shadow-neon active:text-lime-400 transition-colors duration-200 transform hover:scale-105">Dashboard</a>
      <a href="#" class="text-3xl font-extrabold text-white text-shadow-neon active:text-lime-400 transition-colors duration-200 transform hover:scale-105">Transactions</a>
      <a href="#" class="text-3xl font-extrabold text-white text-shadow-neon active:text-lime-400 transition-colors duration-200 transform hover:scale-105">Portfolio</a>
      <div class="relative group">
        <button class="text-3xl font-extrabold text-white text-shadow-neon active:text-lime-400 transition-colors duration-200 transform hover:scale-105 flex items-center justify-center">
          Tools
          <svg class="w-6 h-6 ml-2 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="M19 9l-7 7-7-7"></path></svg>
        </button>
        <div class="mt-4 p-2 bg-gradient-to-br from-purple-800/90 to-indigo-800/90 dark:from-gray-900/90 dark:to-black/90 backdrop-blur-md rounded-xl shadow-lg border border-lime-400/30 w-48 mx-auto hidden group-hover:block transition-all duration-300">
          <a href="#" class="block px-4 py-2 text-white text-xl font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">Staking</a>
          <a href="#" class="block px-4 py-2 text-white text-xl font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">NFTs</a>
          <a href="#" class="block px-4 py-2 text-white text-xl font-medium hover:bg-lime-400/20 rounded-md transition-colors duration-200">Analytics</a>
        </div>
      </div>
      <a href="#" class="text-3xl font-extrabold text-white text-shadow-neon active:text-lime-400 transition-colors duration-200 transform hover:scale-105">Support</a>
    </nav>
    <button aria-label="search" class="mt-8 text-white hover:text-cyan-400 transition-colors duration-200">
      <svg class="w-10 h-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
    </button>
  </div>
</header>

<!-- Just for demonstration of responsiveness and dark mode -->
<main class="min-h-screen bg-gray-100 dark:bg-gray-800 p-8 transition-colors duration-500 flex flex-col justify-center items-center text-center">
  <h1 class="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-lime-400 dark:to-cyan-400 mb-6">Welcome to QuantumLedger</h1>
  <p class="text-xl text-gray-700 dark:text-gray-300 max-w-xl">Explore the future of decentralized finance with our intuitive and secure platform.</p>
</main>

<style>
  /* This is for the custom gradient animation */
  @keyframes gradient-xy {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
  }

  /* This is for potential mobile menu animation */
  @keyframes fade-in-down {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .animate-gradient-xy {
    animation: gradient-xy 15s ease infinite;
  }

  .text-shadow-neon {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.7), 0 0 10px var(--tw-neon-color, rgba(0, 255, 255, 0.5)), 0 0 15px var(--tw-neon-color, rgba(0, 255, 255, 0.3));
    --tw-neon-color: theme('colors.cyan.400'); /* Default neon color */
  }

  .dark .text-shadow-neon {
    --tw-neon-color: theme('colors.fuchsia.300'); /* Dark mode neon color */
  }
    
  .animate-fade-in-down {
    animation: fade-in-down 0.3s ease-out forwards;
  }
</style>

<script>
  // Basic JavaScript to toggle mobile menu visibility
  document.getElementById('mobile-menu-button').addEventListener('click', function() {
    const mobileMenu = document.getElementById('mobile-menu');
    const openIcon = document.getElementById('menu-icon-open');
    const closeIcon = document.getElementById('menu-icon-close');

    if (mobileMenu.classList.contains('hidden')) {
      mobileMenu.classList.remove('hidden');
      mobileMenu.classList.remove('opacity-0', 'pointer-events-none');
      mobileMenu.classList.add('opacity-100', 'pointer-events-auto');
      openIcon.classList.add('hidden');
      closeIcon.classList.remove('hidden');
    } else {
      mobileMenu.classList.remove('opacity-100', 'pointer-events-auto');
      mobileMenu.classList.add('opacity-0', 'pointer-events-none');
      // Add a small delay before hiding to allow fade-out animation
      setTimeout(() => {
        mobileMenu.classList.add('hidden');
      }, 300); 
      openIcon.classList.remove('hidden');
      closeIcon.classList.add('hidden');
    }
  });

  // Close mobile menu when a link is clicked
  document.querySelectorAll('#mobile-menu a').forEach(item => {
    item.addEventListener('click', () => {
      const mobileMenu = document.getElementById('mobile-menu');
      const openIcon = document.getElementById('menu-icon-open');
      const closeIcon = document.getElementById('menu-icon-close');

      mobileMenu.classList.remove('opacity-100', 'pointer-events-auto');
      mobileMenu.classList.add('opacity-0', 'pointer-events-none');
      setTimeout(() => {
        mobileMenu.classList.add('hidden');
      }, 300); 
      openIcon.classList.remove('hidden');
      closeIcon.classList.add('hidden');
    });
  });
</script>

Search Components

Categories

Navigation Bar