Componenti Mega Menù Componente Mega Menu - Bagliore al neon

Componente Mega Menu - Bagliore al neon

Un componente di mega menu semplice e reattivo con effetti neon/bagliore, colori neutri caldi e supporto per la modalità scura, adatto per i sistemi di prenotazione/prenotazione.

Anteprima

Codice HTML

<nav class="bg-gradient-to-r from-stone-100 to-amber-50 dark:from-stone-900 dark:to-stone-800 p-4 shadow-sm font-sans relative">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-stone-800 dark:text-stone-100 text-2xl font-bold tracking-tight relative">
      GlowBook
      <span class="absolute inset-0 block rounded-full blur-sm opacity-50 bg-amber-300 dark:bg-amber-600 animate-pulse"></span>
    </a>
    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-stone-600 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 text-lg font-medium relative group transition duration-300">
        Book Now
        <span class="absolute inset-0 block rounded-full blur-sm opacity-0 group-hover:opacity-20 transition-opacity duration-300 bg-amber-300 dark:bg-amber-600"></span>
      </a>
      <a href="#" class="text-stone-600 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 text-lg font-medium relative group transition duration-300">
        Services
        <span class="absolute inset-0 block rounded-full blur-sm opacity-0 group-hover:opacity-20 transition-opacity duration-300 bg-amber-300 dark:bg-amber-600"></span>
      </a>
      <a href="#" class="text-stone-600 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 text-lg font-medium relative group transition duration-300">
        About Us
        <span class="absolute inset-0 block rounded-full blur-sm opacity-0 group-hover:opacity-20 transition-opacity duration-300 bg-amber-300 dark:bg-amber-600"></span>
      </a>
      <a href="#" class="text-stone-600 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 text-lg font-medium relative group transition duration-300">
        Contact
        <span class="absolute inset-0 block rounded-full blur-sm opacity-0 group-hover:opacity-20 transition-opacity duration-300 bg-amber-300 dark:bg-amber-600"></span>
      </a>
    </div>
    <div class="md:hidden">
      <button aria-label="Toggle menu" class="text-stone-700 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 rounded p-1.5 focus:ring-offset-2 focus:ring-offset-stone-100 dark:focus:ring-offset-stone-900">
        <svg class="w-7 h-7" 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-7 6h7"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

Componenti correlati

Semplice modalità scura Mega Menu

Un componente di mega menu semplice e reattivo per siti Web aziendali che utilizzano la modalità scura con una combinazione di colori complementare. Costruito con Tailwind CSS, con supporto per temi scuri e senza JavaScript.

Aperto

Mega Menu per l'e-commerce brutalista

Un mega menu complesso, in stile brutalista, per l'e-commerce, caratterizzato da un contrasto elevato e toni di blu professionali. Completamente reattivo con supporto per la modalità scura.

Aperto

Componente Mega Menu

Un componente Mega Menu reattivo progettato con lo stile Glassmorphism, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, che supportano temi scuri utilizzando Tailwind CSS.

Aperto