Componente Mega Menú
Un Mega Componente de Menú responsivo diseñado con estilo Glassmorphism, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, que admite temas oscuros usando Tailwind CSS.
Código HTML
<div class="relative bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<div class="absolute inset-0 bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-50 backdrop-blur-md"></div>
<nav class="relative z-10">
<div class="container mx-auto px-4 py-6">
<div class="flex justify-between items-center">
<div class="text-2xl font-bold text-gray-800 dark:text-white">Brand</div>
<div class="hidden lg:flex space-x-8">
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Home</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">About</a>
<div class="relative group">
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Services</a>
<div class="absolute left-0 hidden mt-2 w-48 bg-white dark:bg-gray-900 rounded-lg shadow-lg group-hover:block">
<div class="p-4">
<a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">Web Design</a>
<a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">SEO Services</a>
<a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">Marketing</a>
</div>
</div>
</div>
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Contact</a>
</div>
<div class="lg:hidden">
<button class="text-gray-800 dark: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"/></svg>
</button>
</div>
</div>
</div>
</nav>
<div class="hidden lg:block relative overflow-hidden">
<img class="object-cover w-full h-64 opacity-50" src="https://picsum.photos/800/400" alt="Mega Menu Background">
<div class="absolute inset-0 flex items-center justify-center">
<div class="bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-50 p-6 rounded-lg shadow-lg">
<h2 class="text-3xl font-bold text-gray-800 dark:text-white">Welcome to Our Services</h2>
<p class="text-gray-700 dark:text-gray-300 mt-2">Explore our range of services tailored for your business needs.</p>
<a href="#" class="mt-4 inline-block bg-blue-500 text-white font-bold py-2 px-4 rounded-lg shadow hover:bg-blue-600">Get Started</a>
</div>
</div>
</div>
<footer class="text-center py-4 bg-gray-200 dark:bg-gray-700">
<p class="text-gray-800 dark:text-white">© 2023 My Company</p>
</footer>
</div>Componentes relacionados
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.
Componente Mega Menú
Un mega componente de menú receptivo diseñado con un aspecto 3D, que incluye efectos de profundidad y soporte para temas oscuros utilizando Tailwind CSS. El componente presenta imágenes y avatares de usuario de servicios de marcador de posición.
Componente Mega Menú
Un Mega Componente de Menú receptivo diseñado en un estilo esqueuomórfico con un esquema de color en escala de grises para sitios web comerciales y corporativos. Es compatible con el tema oscuro y utiliza Tailwind CSS para el estilo.