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
Méga Menu brutaliste
Un méga composant de menu réactif avec un design brutaliste, avec des tons de terre et la prise en charge du mode sombre pour un blog ou un site Web axé sur le contenu.
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.
Composant Mega Menu
Un composant Mega Menu réactif conçu pour la consommation de blogs/contenu, avec des micro-interactions et un accent sur les couleurs de terre, avec prise en charge du mode sombre à l’aide de Tailwind CSS.