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.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<div class="flex justify-between items-center">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Mega Menu</h2>
<button class="focus:outline-none hover:bg-gray-200 dark:hover:bg-gray-700 p-2 rounded-lg transition ease-in-out duration-300">Menu</button>
</div>
<div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden p-4 transition-transform transform hover:scale-105">
<h3 class="font-bold text-lg text-gray-900 dark:text-white">Category 1</h3>
<ul class="mt-2">
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 1</a></li>
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 2</a></li>
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 3</a></li>
</ul>
<img src="https://picsum.photos/200/150?random=1" alt="Category 1" class="mt-4 rounded-lg w-full">
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden p-4 transition-transform transform hover:scale-105">
<h3 class="font-bold text-lg text-gray-900 dark:text-white">Category 2</h3>
<ul class="mt-2">
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 1</a></li>
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 2</a></li>
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 3</a></li>
</ul>
<img src="https://picsum.photos/200/150?random=2" alt="Category 2" class="mt-4 rounded-lg w-full">
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden p-4 transition-transform transform hover:scale-105">
<h3 class="font-bold text-lg text-gray-900 dark:text-white">Category 3</h3>
<ul class="mt-2">
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 1</a></li>
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 2</a></li>
<li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 3</a></li>
</ul>
<img src="https://picsum.photos/200/150?random=3" alt="Category 3" class="mt-4 rounded-lg w-full">
</div>
</div>
<div class="mt-6 border-t border-gray-300 dark:border-gray-600 pt-4">
<h4 class="font-semibold text-gray-900 dark:text-white">Follow Us</h4>
<div class="flex space-x-4 mt-2">
<a href="#" class="flex items-center space-x-2 transition duration-200 hover:text-blue-500 dark:hover:text-blue-300">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-8 h-8 rounded-full">
<span>Profile 1</span>
</a>
<a href="#" class="flex items-center space-x-2 transition duration-200 hover:text-blue-500 dark:hover:text-blue-300">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-8 h-8 rounded-full">
<span>Profile 2</span>
</a>
</div>
</div>
</div>Composants associés
Composant Mega Menu - Neumorphic Vibrant E-commerce
Un méga composant de menu complexe et réactif conçu avec un style de commerce électronique neumorphe et dynamique. Comprend plusieurs colonnes, des exemples d’images et des listes de catégories, avec une prise en charge complète du mode sombre.
Composant Mega Menu
Composant Mega Menu avec style Neumorphisme pour le site Web de blog/contenu, utilisant un schéma de couleurs analogue et une complexité modérée. Conception réactive avec prise en charge du thème sombre. Pas de JavaScript.
Neumorphic_Mega_Menu_Weather_Climate
Un méga composant de menu réactif, de style neumorphique, pour les données météorologiques et climatiques, avec une palette de couleurs pastel et la prise en charge du mode sombre.