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ú
Un componente de mega menú complejo y receptivo diseñado con una estética monoespaciada / desarrollador y un esquema de color neutro cálido, adecuado para sitios web profesionales de consultoría / servicios. Incluye soporte para modo oscuro.
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.