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 Mega Componente de Menú de estilo Neumorphic para un sitio de portafolio, diseñado con un esquema de color en escala de grises y soporte de tema oscuro receptivo utilizando Tailwind CSS.
Componente Mega Menú
Mega Componente de menú con estilo Glassmorphism, esquema de color monocromático, nivel de complejidad complejo, para fines de tablero. Diseño responsivo con soporte para temas oscuros. Utiliza Tailwind CSS. No se necesita código JavaScript.
Brutalist_Triadic_Simple_Mega_Menu
Un mega menú simple de estilo brutalista diseñado para un blog o sitio de contenido, con un esquema de color triádico y una capacidad de respuesta completa con soporte para modo oscuro.