Composant Mega Menu
Un composant de méga menu réactif conçu avec un style skeuomorphe utilisant Tailwind CSS, avec prise en charge du mode sombre.
HTML Code
<div class="relative bg-white dark:bg-gray-800">
<nav class="flex items-center justify-between p-4 shadow-lg">
<div class="text-2xl font-bold text-gray-800 dark:text-white">My Website</div>
<ul class="flex space-x-6">
<li><a href="#" class="text-gray-800 dark:text-white hover:underline">Home</a></li>
<li><a href="#" class="text-gray-800 dark:text-white hover:underline">About</a></li>
<li class="relative">
<a href="#" class="text-gray-800 dark:text-white hover:underline">Services</a>
<div class="absolute left-0 hidden mt-2 w-48 bg-white dark:bg-gray-700 shadow-lg rounded-lg transition duration-300 transform scale-95 hover:scale-100" id="menu">
<div class="p-4">
<h3 class="text-gray-800 dark:text-white font-semibold">Web Design</h3>
<img src="https://picsum.photos/200/100?random=1" alt="Web Design" class="my-2 rounded-lg shadow-lg">
<p class="text-gray-600 dark:text-gray-300">Creating visually appealing websites.</p>
</div>
<div class="border-t border-gray-200 dark:border-gray-600"></div>
<div class="p-4">
<h3 class="text-gray-800 dark:text-white font-semibold">SEO Services</h3>
<img src="https://picsum.photos/200/100?random=2" alt="SEO Services" class="my-2 rounded-lg shadow-lg">
<p class="text-gray-600 dark:text-gray-300">Optimizing search engine results.</p>
</div>
<div class="border-t border-gray-200 dark:border-gray-600"></div>
<div class="p-4">
<h3 class="text-gray-800 dark:text-white font-semibold">Marketing</h3>
<img src="https://picsum.photos/200/100?random=3" alt="Marketing" class="my-2 rounded-lg shadow-lg">
<p class="text-gray-600 dark:text-gray-300">Promoting your business effectively.</p>
</div>
</div>
</li>
<li><a href="#" class="text-gray-800 dark:text-white hover:underline">Contact</a></li>
</ul>
</nav>
<div class="hidden md:block mt-4 p-4 bg-gray-100 dark:bg-gray-600 rounded-lg">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Team Members</h2>
<div class="flex space-x-4 mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-12 h-12 rounded-full" alt="Avatar">
<img src="https://randomuser.me/api/portraits/women/1.jpg" class="w-12 h-12 rounded-full" alt="Avatar">
<img src="https://randomuser.me/api/portraits/men/2.jpg" class="w-12 h-12 rounded-full" alt="Avatar">
</div>
</div>
</div>
<style>
/* Dark mode styles */
.dark .bg-gray-800 {
background-color: #333;
}
.dark .text-gray-800 {
color: #f7fafc;
}
</style>Composants associés
Composant Mega Menu
Méga composant de menu avec conception matérielle, schéma de couleurs triadique, niveau complexe, à des fins de tableau de bord, réactif avec prise en charge du thème sombre.
Méga Menu en mode sombre simple
Un composant de méga-menu simple et réactif pour les sites Web d’entreprise utilisant le mode sombre avec une palette de couleurs complémentaire. Construit avec Tailwind CSS, avec prise en charge du thème sombre et sans JavaScript.
Composant Mega Menu
Un composant de méga menu avec un style de design brutaliste, avec une palette de couleurs monochromatiques et un design réactif adapté à un blog ou à une plate-forme de contenu.