Composant Mega Menu
Un composant Mega Menu réactif stylisé avec Skeuomorphism, avec prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<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>Composants associés
Composant Mega Menu
Un composant de méga menu réactif conçu avec Tailwind CSS, avec des micro-interactions pour des animations attrayantes et une prise en charge des thèmes sombres.
Méga composant de menu - Memphis Earth Tones Food/Restaurant
Un méga composant de menu réactif pour les sites Web d’alimentation/restaurant, inspiré du design de Memphis avec des tons de terre. Présente des couleurs vives, des formes géométriques et des motifs ludiques. Inclut la prise en charge du mode sombre.
Composant Mega Menu
Un composant de méga menu réactif conçu pour les blogs ou la consommation de contenu, avec des éléments de conception 3D et des couleurs aux tons de terre, avec prise en charge du thème sombre.