Componente Mega Menú
Un componente de Mega Menú responsivo con estilo Skeuomorphism, con soporte para temas oscuros usando Tailwind CSS.
Código HTML
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
<div class="flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-3">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Website</h1>
</div>
<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 class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 1</h2>
<ul class="mt-2">
<li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
</ul>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 2</h2>
<ul class="mt-2">
<li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
</ul>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 3</h2>
<ul class="mt-2">
<li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
</ul>
</div>
</div>
<div class="mt-6">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Featured Users</h2>
<div class="flex space-x-4 mt-2">
<div class="flex flex-col items-center">
<img src="https://picsum.photos/50/50" alt="User 1" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
<span class="text-gray-800 dark:text-gray-200">User 1</span>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/50/50" alt="User 2" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
<span class="text-gray-800 dark:text-gray-200">User 2</span>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/50/50" alt="User 3" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
<span class="text-gray-800 dark:text-gray-200">User 3</span>
</div>
</div>
</div>
</div>Componentes relacionados
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.
Componente Mega Menú
Un Mega Componente de Menú con estilo Neumorphism con un esquema de color monocromático diseñado para blogs y consumo de contenido. Es compatible con el diseño responsivo con modo oscuro.
Componente Mega Menú
Un mega componente de menú responsivo diseñado para blogs o consumo de contenido, con elementos de diseño 3D y colores en tonos tierra, con soporte para temas oscuros.