Composant Mega Menu - Neon Glow
Un composant de méga menu simple et réactif avec des effets de néon/lueur, des couleurs neutres chaudes et la prise en charge du mode sombre, adapté aux systèmes de réservation.
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>Composants associés
Composant Mega Menu
Un composant de méga menu réactif conçu dans l’interface utilisateur du mode sombre avec une palette de couleurs en niveaux de gris pour les interfaces de médias sociaux.
Méga composant de menu - Memphis Earth Tones Food/Restaurant
Un méga composant de menu réactif pour les sites Web d’alimentation/restaurant, inspiré du design de Memphis avec des tons de terre. Présente des couleurs vives, des formes géométriques et des motifs ludiques. Inclut la prise en charge du mode sombre.
Composant Mega Menu
Un composant de méga menu réactif conçu dans le style Glassmorphism, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou, prenant en charge les thèmes sombres à l’aide de Tailwind CSS.