Mega Menu Component - Neon Glow
A simple, responsive mega menu component with neon/glow effects, warm neutral colors, and dark mode support, suitable for booking/reservation systems.
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>
Related Components
Mega Menu Component
A responsive mega menu component designed for blogs or content consumption, featuring 3D design elements and earth-toned colors, with dark theme support.
Mega Menu Component
Mega Menu Component with Glassmorphism style, Monochromatic color scheme, Complex complexity level, for Dashboard purpose. Responsive design with dark theme support. Uses Tailwind CSS. No JavaScript code needed.
Mega Menu Component - Forest/Green, Microinteractions, Non-profit
A responsive mega menu component designed for non-profit/charity websites, featuring a forest/green color palette, microinteractions on hover, and full dark mode support. It provides sections for 'Our Mission', 'How We Help', 'Events & News', and 'Get Involved'.