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.
Código HTML
<div class="bg-white dark:bg-gray-800 relative group">
<div class="container mx-auto p-4">
<nav class="flex justify-between items-center">
<div class="text-2xl font-semibold text-brown-600 dark:text-green-200">
Blog Title
</div>
<div class="hidden md:flex space-x-8">
<a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Home</a>
<a href="#" class="relative transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Categories
<div class="absolute inset-x-0 bottom-0 h-0.5 bg-brown-600 dark:bg-green-200 transition duration-300 ease-in-out transform scale-x-0 group-hover:scale-x-100"></div>
</a>
<a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">About</a>
<a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Contact</a>
</div>
<div class="md:hidden">
<button class="text-brown-600 dark:text-green-200 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 12h16M4 18h16" />
</svg>
</button>
</div>
</nav>
</div>
<div class="absolute hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 w-full rounded-lg overflow-hidden transition-opacity duration-300 ease-in-out">
<div class="container mx-auto p-6">
<div class="grid grid-cols-2 gap-4">
<div>
<h2 class="font-bold text-lg text-brown-600 dark:text-green-200">Latest Posts</h2>
<ul class="space-y-2">
<li>
<a href="#" class="flex items-center space-x-2 transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">
<img src="https://picsum.photos/50" alt="Post 1" class="h-10 w-10 rounded-full">
<span>Understanding Earth Tones in Design</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-2 transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">
<img src="https://picsum.photos/50" alt="Post 2" class="h-10 w-10 rounded-full">
<span>The Beauty of Nature-Inspired Living</span>
</a>
</li>
</ul>
</div>
<div>
<h2 class="font-bold text-lg text-brown-600 dark:text-green-200">Categories</h2>
<ul class="space-y-2">
<li><a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Lifestyle</a></li>
<li><a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Travel</a></li>
<li><a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Food</a></li>
<li><a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Wellness</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente Mega Menú
Mega Componente de Menú con Diseño Minimalista/Plano, Esquema de Color Vibrante, Nivel de Complejidad Complejo, para Propósitos de Tablero, usando Tailwind CSS. Diseño responsivo con soporte para temas oscuros. Sin código JavaScript, solo HTML con clases Tailwind. El modo oscuro usa el prefijo dark: de Tailwind para el estilo. Las imágenes usan picsum.photos y randomuser.me para avatares.
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.
Componente Mega Menú
Mega menú CSS de viento de cola receptivo con diseño 3D, combinación de colores análoga y compatibilidad con el modo oscuro