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.
HTML Code
<div class="bg-gray-900 text-gray-100 p-4">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-3xl font-bold">My Blog</h1>
<button class="text-gray-100 hover:text-gray-300">Menu</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
<div class="bg-gray-800 p-4 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold">Category 1</h2>
<ul class="list-disc list-inside">
<li class="mt-2"><a href="#" class="hover:text-gray-300">Post 1</a></li>
<li class="mt-2"><a href="#" class="hover:text-gray-300">Post 2</a></li>
<li class="mt-2"><a href="#" class="hover:text-gray-300">Post 3</a></li>
</ul>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold">Category 2</h2>
<ul class="list-disc list-inside">
<li class="mt-2"><a href="#" class="hover:text-gray-300">Post 1</a></li>
<li class="mt-2"><a href="#" class="hover:text-gray-300">Post 2</a></li>
<li class="mt-2"><a href="#" class="hover:text-gray-300">Post 3</a></li>
</ul>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold">Category 3</h2>
<ul class="list-disc list-inside">
<li class="mt-2"><a href="#" class="hover:text-gray-300">Post 1</a></li>
<li class="mt-2"><a href="#" class="hover:text-gray-300">Post 2</a></li>
<li class="mt-2"><a href="#" class="hover:text-gray-300">Post 3</a></li>
</ul>
</div>
</div>
<div class="mt-8 flex justify-evenly">
<div class="bg-gray-800 p-4 rounded-lg w-1/4">
<img src="https://picsum.photos/200/300?random" alt="Random Image" class="rounded-lg mb-2"/>
<p class="text-lg">Featured Image</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg w-1/4">
<img src="https://picsum.photos/200/300?random" alt="Random Image" class="rounded-lg mb-2"/>
<p class="text-lg">Featured Image</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg w-1/4">
<img src="https://picsum.photos/200/300?random" alt="Random Image" class="rounded-lg mb-2"/>
<p class="text-lg">Featured Image</p>
</div>
</div>
<div class="text-center mt-4">
<p class="text-sm">© 2023 My Blog. All rights reserved.</p>
</div>
</div>Composants associés
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 - Forêt/Vert, Microinteractions, Organisme à but non lucratif
Un composant de méga menu réactif conçu pour les sites Web à but non lucratif/caritatifs, avec une palette de couleurs forêt/vert, des micro-interactions au survol et une prise en charge complète du mode sombre. Il fournit des sections pour 'Notre mission', 'Comment nous aidons', 'Événements et actualités' et 'Impliquez-vous'.
Composant de méga menu minimaliste
Composant de méga menu minimaliste avec effets réactifs et prise en charge du thème sombre, pas de JavaScript.