Composant Mega Menu
Un composant de méga menu réactif conçu avec un look 3D, y compris des effets de profondeur et la prise en charge du thème sombre à l’aide de Tailwind CSS. Le composant présente des images et des avatars d’utilisateurs provenant de services d’espace réservé.
HTML Code
<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>Composants associés
Composant Mega Menu
Un composant de méga menu de style Neumorphisme avec une palette de couleurs monochromatiques conçu pour les blogs et la consommation de contenu. Il prend en charge la conception réactive avec le mode sombre.
Composant Mega Menu
Un composant de méga menu réactif conçu dans un style skeuomorphe avec une palette de couleurs en niveaux de gris pour les sites Web d’entreprise et d’entreprise. Il prend en charge le thème sombre et utilise Tailwind CSS pour le style.
Composant Mega Menu - Neumorphic Vibrant E-commerce
Un méga composant de menu complexe et réactif conçu avec un style de commerce électronique neumorphe et dynamique. Comprend plusieurs colonnes, des exemples d’images et des listes de catégories, avec une prise en charge complète du mode sombre.