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
Composant Mega Menu
Méga menu CSS réactif avec conception 3D, schéma de couleurs analogue et prise en charge du mode sombre
Composant Mega Menu
Méga composant de menu avec un design minimaliste / plat, une palette de couleurs vives, un niveau de complexité complexe, à des fins de tableau de bord, en utilisant Tailwind CSS. Conception réactive avec prise en charge du thème sombre. Pas de code JavaScript, seulement du HTML avec des classes Tailwind. Le mode sombre utilise le préfixe dark : de Tailwind pour le coiffage. Les images utilisent picsum.photos et randomuser.me pour les avatars.
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é.