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.
HTML Code
<div class="bg-brown-900 dark:bg-gray-800 p-6">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="text-white text-2xl font-bold">Blog</div>
<nav class="mt-4 md:mt-0">
<ul class="flex flex-col md:flex-row space-x-0 md:space-x-8">
<li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
<a href="#" class="text-white">Home</a>
</li>
<li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
<a href="#" class="text-white">About</a>
</li>
<li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
<a href="#" class="text-white">Categories</a>
</li>
<li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
<a href="#" class="text-white">Contact</a>
</li>
</ul>
</nav>
</div>
<div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-brown-800 dark:bg-gray-700 p-4 rounded">
<img src="https://picsum.photos/300/200?random=1" alt="Post Thumbnail" class="w-full h-auto rounded mb-4">
<h2 class="text-lg font-semibold text-white">Post Title 1</h2>
<p class="text-gray-300">An engaging description about this post goes here. It captures the essence of the content.</p>
</div>
<div class="bg-brown-800 dark:bg-gray-700 p-4 rounded">
<img src="https://picsum.photos/300/200?random=2" alt="Post Thumbnail" class="w-full h-auto rounded mb-4">
<h2 class="text-lg font-semibold text-white">Post Title 2</h2>
<p class="text-gray-300">An engaging description about this post goes here. It captures the essence of the content.</p>
</div>
<div class="bg-brown-800 dark:bg-gray-700 p-4 rounded">
<img src="https://picsum.photos/300/200?random=3" alt="Post Thumbnail" class="w-full h-auto rounded mb-4">
<h2 class="text-lg font-semibold text-white">Post Title 3</h2>
<p class="text-gray-300">An engaging description about this post goes here. It captures the essence of the content.</p>
</div>
</div>
</div>
</div>Composants associés
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.
Composant Mega Menu
Un composant de méga menu de style neumorphique pour un site de portfolio, conçu avec un schéma de couleurs en niveaux de gris et une prise en charge réactive du thème sombre à l’aide de Tailwind CSS.
Composant Mega Menu
Composant Mega Menu avec style Glassmorphism, palette de couleurs monochromatique, niveau de complexité complexe, à des fins de tableau de bord. Conception réactive avec prise en charge du thème sombre. Utilise Tailwind CSS. Aucun code JavaScript n’est nécessaire.