Mega Menu Komponente - Neon Glow
Eine einfache, reaktionsschnelle Mega-Menükomponente mit Neon-/Leuchteffekten, warmen neutralen Farben und Unterstützung für den Dunkelmodus, geeignet für Buchungs-/Reservierungssysteme.
HTML-Code
<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>
Verwandte Komponenten
Mega-Menü-Komponente
Ein reaktionsschnelles Mega-Menü im Unternehmensstil für Bildungsplattformen mit mehreren Kategorien, aktuellen Kursen und Ressourcenlinks. Enthält Unterstützung für den Dunkelmodus und ein sauberes, vertrauenswürdiges Design mit einer Akzentfarbe.
Mega Menükomponente - Memphis Earth Tones Essen/Restaurant
Eine responsive Mega-Menükomponente für Food-/Restaurant-Websites, inspiriert vom Memphis-Design mit Erdtönen. Mit kräftigen Farben, geometrischen Formen und verspielten Mustern. Enthält Unterstützung für den Dunkelmodus.
Mega-Menü-Komponente
Eine reaktionsschnelle Mega-Menü-Komponente, die in der Dunkelmodus-Benutzeroberfläche mit einem Graustufen-Farbschema für Social-Media-Schnittstellen entwickelt wurde.