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.
Código HTML
<div class="backdrop-filter backdrop-blur-lg bg-opacity-20 bg-gray-700 text-white dark:bg-gray-800 dark:bg-opacity-30 p-6 rounded-lg shadow-xl w-full max-w-6xl mx-auto mt-10">
<div class="flex justify-between items-center border-b border-gray-600 dark:border-gray-700 pb-4">
<h2 class="text-2xl font-semibold">Dashboard Navigation</h2>
<button class="text-gray-300 hover:text-white focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
<h3 class="font-bold text-lg mb-2">Overview</h3>
<ul>
<li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Dashboard Home</a></li>
<li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Analytics</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Reporting</a></li>
</ul>
</div>
<div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
<h3 class="font-bold text-lg mb-2">Management</h3>
<ul>
<li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Users</a></li>
<li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Settings</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Permissions</a></li>
</ul>
</div>
<div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
<h3 class="font-bold text-lg mb-2">Projects</h3>
<ul>
<li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Active Projects</a></li>
<li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Archived Projects</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Add New Project</a></li>
</ul>
</div>
<div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
<h3 class="font-bold text-lg mb-2">Support</h3>
<ul>
<li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Help Center</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Contact Us</a></li>
</ul>
</div>
</div>
<div class="mt-6 border-t border-gray-600 dark:border-gray-700 pt-4 flex justify-between items-center">
<div>
<p class="text-gray-400 text-sm">Last updated: Today</p>
</div>
<div>
<img class="h-8 w-8 rounded-full ring-2 ring-gray-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
</div>
</div>
</div>Componentes relacionados
Mega Menú Retro Vintage
Un mega componente de menú receptivo diseñado en un estilo retro / vintage inspirado en la estética de los años 80 y 90, con soporte para temas oscuros e imágenes de marcador de posición.
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.
Mega Componente de Menú - Memphis Earth Tones Comida/Restaurante
Un mega componente de menú receptivo para sitios web de alimentos / restaurantes, inspirado en el diseño de Memphis con tonos tierra. Presenta colores llamativos, formas geométricas y patrones divertidos. Incluye soporte para modo oscuro.