Composant Mega Menu
Un composant de méga menu e-commerce simple et sombre avec une palette de couleurs en niveaux de gris, construit à l’aide de Tailwind CSS. Il est réactif et inclut la prise en charge du thème sombre à l’aide du préfixe dark : de Tailwind.
HTML Code
<nav class="bg-gray-950 text-white p-4">
<div class="container mx-auto flex justify-between items-center">
<a href="#" class="text-2xl font-bold">ShopName</a>
<div class="hidden md:flex space-x-6">
<div class="relative group">
<button class="hover:text-gray-300">Categories</button>
<div class="absolute hidden group-hover:block bg-gray-900 shadow-lg mt-2 p-4 rounded-md w-48">
<a href="#" class="block py-2 hover:bg-gray-800">Electronics</a>
<a href="#" class="block py-2 hover:bg-gray-800">Apparel</a>
<a href="#" class="block py-2 hover:bg-gray-800">Home Goods</a>
</div>
</div>
<a href="#" class="hover:text-gray-300">New Arrivals</a>
<a href="#" class="hover:text-gray-300">Sales</a>
<a href="#" class="hover:text-gray-300">Contact</a>
</div>
<div class="md:hidden">
<button class="text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
</div>
</nav>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 Mega Menu
Un composant de méga menu réactif conçu avec Tailwind CSS, avec des micro-interactions pour des animations attrayantes et une prise en charge des thèmes sombres.
Méga Menu Rétro
Un méga composant de menu de style rétro/vintage avec des effets réactifs et la prise en charge du thème sombre, mis en œuvre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus. Le mode sombre est géré uniquement avec CSS.