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.
Código HTML
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
<div class="flex justify-between items-center p-4 border-b border-gray-200 dark:border-gray-700">
<div class="text-xl font-semibold text-gray-800 dark:text-gray-200">Mega Menu</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none">
Menu
</button>
</div>
<div class="grid grid-cols-3 gap-4 p-4">
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out">
<img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="rounded-md mb-2">
<h3 class="font-semibold text-gray-800 dark:text-gray-200">Category 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description for category 1.</p>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out">
<img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image" class="rounded-md mb-2">
<h3 class="font-semibold text-gray-800 dark:text-gray-200">Category 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description for category 2.</p>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out">
<img src="https://picsum.photos/200/100?random=3" alt="Placeholder Image" class="rounded-md mb-2">
<h3 class="font-semibold text-gray-800 dark:text-gray-200">Category 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description for category 3.</p>
</div>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2">User Profiles</h4>
<div class="flex flex-wrap">
<div class="flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-2 mr-2 mb-2 shadow-md">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">User 1</span>
</div>
<div class="flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-2 mr-2 mb-2 shadow-md">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">User 2</span>
</div>
<div class="flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-2 mr-2 mb-2 shadow-md">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<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ú
Mega Componente de Menú con estilo Neumorfismo para el sitio web de Blog/Contenido, utilizando un esquema de color análogo y una complejidad moderada. Diseño responsivo con soporte para temas oscuros. Sin JavaScript.
Skeuomorfismo Redes Sociales Mega Menú
Mega Componente de menú con diseño de Skeuomorphism, esquema de color triádico y complejidad simple para fines de redes sociales. Responsivo con soporte para temas oscuros.