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.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Blog Categories</h2>
<nav class="relative mt-4">
<ul class="flex space-x-6">
<li class="group relative">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-200 transition duration-150">Category 1</a>
<div class="absolute left-0 z-10 hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg group-hover:block">
<div class="p-4 space-y-4">
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 1-1</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 1-2</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 1-3</a>
</div>
</div>
</li>
<li class="group relative">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-200 transition duration-150">Category 2</a>
<div class="absolute left-0 z-10 hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg group-hover:block">
<div class="p-4 space-y-4">
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 2-1</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 2-2</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 2-3</a>
</div>
</div>
</li>
<li class="group relative">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-200 transition duration-150">Category 3</a>
<div class="absolute left-0 z-10 hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg group-hover:block">
<div class="p-4 space-y-4">
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 3-1</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 3-2</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 3-3</a>
</div>
</div>
</li>
</ul>
</nav>
<div class="mt-8">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Featured Posts</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/300/200" alt="Featured Post" class="w-full h-48 object-cover">
<div class="p-4">
<h4 class="font-semibold text-gray-800 dark:text-gray-200">Post Title 1</h4>
<p class="text-gray-600 dark:text-gray-400">Brief description of the post content...</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/300/201" alt="Featured Post" class="w-full h-48 object-cover">
<div class="p-4">
<h4 class="font-semibold text-gray-800 dark:text-gray-200">Post Title 2</h4>
<p class="text-gray-600 dark:text-gray-400">Brief description of the post content...</p>
</div>
</div>
</div>
</div>
<div class="mt-8">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Authors</h3>
<div class="flex space-x-4 mt-4">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author" class="w-10 h-10 rounded-full">
<span class="text-gray-800 dark:text-gray-200">Author 1</span>
</div>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author" class="w-10 h-10 rounded-full">
<span class="text-gray-800 dark:text-gray-200">Author 2</span>
</div>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Author" class="w-10 h-10 rounded-full">
<span class="text-gray-800 dark:text-gray-200">Author 3</span>
</div>
</div>
</div>
</div>Composants associés
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 méga menu réactif complexe, inspiré de la 3D, pour un tableau de bord. Il utilise un schéma de couleurs triadique, prend en charge le mode sombre et comporte plusieurs sections interactives pour la visualisation des données et les panneaux de contrôle.
Composant Mega Menu - Neon Glow
Un composant de méga menu simple et réactif avec des effets de néon/lueur, des couleurs neutres chaudes et la prise en charge du mode sombre, adapté aux systèmes de réservation.