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
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.
Componente Mega Menú
Un componente de mega menú receptivo diseñado en una interfaz de usuario de modo oscuro con un esquema de color en escala de grises para interfaces de redes sociales.
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.