Componente Mega Menú
Un componente de Mega Menú responsivo diseñado con Tailwind CSS, con microinteracciones para animaciones atractivas y soporte para temas oscuros.
Código HTML
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<div class="flex justify-between items-center">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Mega Menu</h2>
<button class="focus:outline-none hover:bg-gray-200 dark:hover:bg-gray-700 p-2 rounded-lg transition ease-in-out duration-300">Menu</button>
</div>
<div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden p-4 transition-transform transform hover:scale-105">
<h3 class="font-bold text-lg text-gray-900 dark:text-white">Category 1</h3>
<ul class="mt-2">
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 1</a></li>
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 2</a></li>
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 3</a></li>
</ul>
<img src="https://picsum.photos/200/150?random=1" alt="Category 1" class="mt-4 rounded-lg w-full">
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden p-4 transition-transform transform hover:scale-105">
<h3 class="font-bold text-lg text-gray-900 dark:text-white">Category 2</h3>
<ul class="mt-2">
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 1</a></li>
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 2</a></li>
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 3</a></li>
</ul>
<img src="https://picsum.photos/200/150?random=2" alt="Category 2" class="mt-4 rounded-lg w-full">
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden p-4 transition-transform transform hover:scale-105">
<h3 class="font-bold text-lg text-gray-900 dark:text-white">Category 3</h3>
<ul class="mt-2">
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 1</a></li>
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 2</a></li>
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 3</a></li>
</ul>
<img src="https://picsum.photos/200/150?random=3" alt="Category 3" class="mt-4 rounded-lg w-full">
</div>
</div>
<div class="mt-6 border-t border-gray-300 dark:border-gray-600 pt-4">
<h4 class="font-semibold text-gray-900 dark:text-white">Follow Us</h4>
<div class="flex space-x-4 mt-2">
<a href="#" class="flex items-center space-x-2 transition duration-200 hover:text-blue-500 dark:hover:text-blue-300">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-8 h-8 rounded-full">
<span>Profile 1</span>
</a>
<a href="#" class="flex items-center space-x-2 transition duration-200 hover:text-blue-500 dark:hover:text-blue-300">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-8 h-8 rounded-full">
<span>Profile 2</span>
</a>
</div>
</div>
</div>Componentes relacionados
ArtDecoFotografíaMegaMenú
Un componente de mega menú simple y receptivo diseñado en un estilo Art Deco con tonos joya, adecuado para portafolios de fotografía. Incluye soporte para modo oscuro.
Componente Mega Menú - Interfaz de usuario de modo oscuro (Finanzas/Banca)
Un mega componente de menú simple y receptivo diseñado para interfaces financieras / bancarias, con una interfaz de usuario de modo oscuro con neutros fríos. Incluye secciones destacadas para enlaces populares, servicios de cuenta y acceso rápido.
Componente de Mega Menú Minimalista
Componente de Mega Menú Minimalista con efectos responsivos y soporte de temas oscuros, sin JavaScript.