Componente Mega Menú
Un componente de mega menú de comercio electrónico simple y de modo oscuro con un esquema de color en escala de grises, construido con Tailwind CSS. Es responsivo e incluye soporte para el tema oscuro usando el prefijo dark: de Tailwind.
Código HTML
<nav class="bg-gray-950 text-white p-4">
<div class="container mx-auto flex justify-between items-center">
<a href="#" class="text-2xl font-bold">ShopName</a>
<div class="hidden md:flex space-x-6">
<div class="relative group">
<button class="hover:text-gray-300">Categories</button>
<div class="absolute hidden group-hover:block bg-gray-900 shadow-lg mt-2 p-4 rounded-md w-48">
<a href="#" class="block py-2 hover:bg-gray-800">Electronics</a>
<a href="#" class="block py-2 hover:bg-gray-800">Apparel</a>
<a href="#" class="block py-2 hover:bg-gray-800">Home Goods</a>
</div>
</div>
<a href="#" class="hover:text-gray-300">New Arrivals</a>
<a href="#" class="hover:text-gray-300">Sales</a>
<a href="#" class="hover:text-gray-300">Contact</a>
</div>
<div class="md:hidden">
<button class="text-white focus:outline-none">
<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="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
</div>
</nav>Componentes relacionados
Componente Mega Menú
Un componente de mega menú con un estilo de diseño brutalista, con un esquema de color monocromático y un diseño receptivo adecuado para un blog o plataforma de contenido.
Componente Mega Menú
Un componente de Mega Menú responsivo con estilo Skeuomorphism, con soporte para temas oscuros usando Tailwind CSS.
Componente Mega Menú
Un componente de Mega Menú responsivo diseñado para blogs/consumo de contenido, con microinteracciones y un enfoque en los colores del tono tierra, con soporte para el modo oscuro usando Tailwind CSS.