Componente Mega Menú
Un componente de mega menú receptivo diseñado con un estilo skeuomórfico usando Tailwind CSS, con soporte para el modo oscuro.
Código HTML
<div class="relative bg-white dark:bg-gray-800">
<nav class="flex items-center justify-between p-4 shadow-lg">
<div class="text-2xl font-bold text-gray-800 dark:text-white">My Website</div>
<ul class="flex space-x-6">
<li><a href="#" class="text-gray-800 dark:text-white hover:underline">Home</a></li>
<li><a href="#" class="text-gray-800 dark:text-white hover:underline">About</a></li>
<li class="relative">
<a href="#" class="text-gray-800 dark:text-white hover:underline">Services</a>
<div class="absolute left-0 hidden mt-2 w-48 bg-white dark:bg-gray-700 shadow-lg rounded-lg transition duration-300 transform scale-95 hover:scale-100" id="menu">
<div class="p-4">
<h3 class="text-gray-800 dark:text-white font-semibold">Web Design</h3>
<img src="https://picsum.photos/200/100?random=1" alt="Web Design" class="my-2 rounded-lg shadow-lg">
<p class="text-gray-600 dark:text-gray-300">Creating visually appealing websites.</p>
</div>
<div class="border-t border-gray-200 dark:border-gray-600"></div>
<div class="p-4">
<h3 class="text-gray-800 dark:text-white font-semibold">SEO Services</h3>
<img src="https://picsum.photos/200/100?random=2" alt="SEO Services" class="my-2 rounded-lg shadow-lg">
<p class="text-gray-600 dark:text-gray-300">Optimizing search engine results.</p>
</div>
<div class="border-t border-gray-200 dark:border-gray-600"></div>
<div class="p-4">
<h3 class="text-gray-800 dark:text-white font-semibold">Marketing</h3>
<img src="https://picsum.photos/200/100?random=3" alt="Marketing" class="my-2 rounded-lg shadow-lg">
<p class="text-gray-600 dark:text-gray-300">Promoting your business effectively.</p>
</div>
</div>
</li>
<li><a href="#" class="text-gray-800 dark:text-white hover:underline">Contact</a></li>
</ul>
</nav>
<div class="hidden md:block mt-4 p-4 bg-gray-100 dark:bg-gray-600 rounded-lg">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Team Members</h2>
<div class="flex space-x-4 mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-12 h-12 rounded-full" alt="Avatar">
<img src="https://randomuser.me/api/portraits/women/1.jpg" class="w-12 h-12 rounded-full" alt="Avatar">
<img src="https://randomuser.me/api/portraits/men/2.jpg" class="w-12 h-12 rounded-full" alt="Avatar">
</div>
</div>
</div>
<style>
/* Dark mode styles */
.dark .bg-gray-800 {
background-color: #333;
}
.dark .text-gray-800 {
color: #f7fafc;
}
</style>Componentes relacionados
Mega Menú Simple de Modo Oscuro
Un componente de mega menú simple y receptivo para sitios web comerciales que utilizan el modo oscuro con un esquema de color complementario. Construido con Tailwind CSS, con soporte para temas oscuros y sin JavaScript.
Componente Mega Menú
Un mega componente de menú minimalista diseñado para mostrar trabajos o productos con soporte para temas oscuros.
Componente de Mega Menú de Glassmorphism
Mega menú de Glassmorphism para interfaces de tablero con esquema de color triádico. Cuenta con un efecto de vidrio esmerilado, diseño receptivo y compatibilidad con el modo oscuro mediante Tailwind CSS.