Componentes de búsqueda

Categorías

Componentes Barra de navegación

Barra de navegación

Por lo general, se encuentra en la parte superior de la página, que contiene enlaces principales

Barra de navegación Art Deco

Una barra de navegación receptiva inspirada en el Art Deco para CRM/Business Tools, con patrones geométricos, ricos tonos joya y compatibilidad con el modo oscuro. Diseñado con complejidad moderada, incluyendo elementos interactivos.

Abrir Vista previa

                <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

Una barra de navegación de lujo/estilo premium para plataformas de citas/sociales, con tipografía elegante, combinación de colores de alto contraste y diseño receptivo con soporte para modo oscuro. Incluye elementos interactivos como un avatar de perfil y un icono de notificación.

Abrir Vista previa

                <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

Una barra de navegación simple y receptiva con una estética suave, artística y en tonos sepia adecuada para marcas de moda y belleza, incluida la compatibilidad con el modo oscuro.

Abrir Vista previa

                <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

Un componente de barra de navegación complejo y sensible para plataformas de música/audio, con efectos de neón/resplandor y una combinación de colores neutros cálidos. Incluye soporte para modo oscuro y elementos interactivos.

Abrir Vista previa

                <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

Una barra de navegación simple y receptiva con estética cyberpunk-retro, diseñada para sitios web de comida / restaurantes. Cuenta con fondo oscuro, colores de acento apagados y compatibilidad con el modo oscuro.

Abrir Vista previa

                <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>

Componente de la barra de navegación

Un componente de barra de navegación complejo y receptivo diseñado con una estética inspirada en el papel / impresión y una combinación de colores en tonos joya, adecuado para sitios web de agricultura / ganadería. Incluye soporte para modo oscuro y múltiples elementos interactivos.

Abrir Vista previa

                <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

Una compleja barra de navegación inspirada en 3D para sitios web de alimentos y restaurantes, con azules corporativos y capacidad de respuesta total con soporte para modo oscuro. Incorpora elementos como un logotipo, enlaces de navegación, barra de búsqueda, avatar de usuario y carrito.

Abrir Vista previa

                <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>

Transiciones de degradado/color Barra de navegación del panel de control en escala de grises

Una barra de navegación compleja y receptiva para un tablero, con transiciones de degradado en un esquema de color en escala de grises. Incluye múltiples elementos interactivos y soporte completo para el modo oscuro.

Abrir Vista previa

                <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>

LujoTravelNavBar

Un componente de barra de navegación simple y elegante para sitios web de viajes y turismo, con tonos tierra de lujo, diseño receptivo y compatibilidad con modo oscuro.

Abrir Vista previa

                <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

Una barra de navegación compleja y receptiva para aplicaciones de criptomonedas/blockchain con un diseño artístico inspirado en la acuarela y una combinación de colores neón brillantes. Incluye soporte para modo oscuro y elementos interactivos.

Abrir Vista previa

                <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>