Composant Mega Menu
Un composant de méga menu réactif conçu dans le style Glassmorphism, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou, prenant en charge les thèmes sombres à l’aide de Tailwind CSS.
HTML Code
<div class="relative bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<div class="absolute inset-0 bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-50 backdrop-blur-md"></div>
<nav class="relative z-10">
<div class="container mx-auto px-4 py-6">
<div class="flex justify-between items-center">
<div class="text-2xl font-bold text-gray-800 dark:text-white">Brand</div>
<div class="hidden lg:flex space-x-8">
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Home</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">About</a>
<div class="relative group">
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Services</a>
<div class="absolute left-0 hidden mt-2 w-48 bg-white dark:bg-gray-900 rounded-lg shadow-lg group-hover:block">
<div class="p-4">
<a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">Web Design</a>
<a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">SEO Services</a>
<a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">Marketing</a>
</div>
</div>
</div>
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Contact</a>
</div>
<div class="lg:hidden">
<button class="text-gray-800 dark: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"/></svg>
</button>
</div>
</div>
</div>
</nav>
<div class="hidden lg:block relative overflow-hidden">
<img class="object-cover w-full h-64 opacity-50" src="https://picsum.photos/800/400" alt="Mega Menu Background">
<div class="absolute inset-0 flex items-center justify-center">
<div class="bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-50 p-6 rounded-lg shadow-lg">
<h2 class="text-3xl font-bold text-gray-800 dark:text-white">Welcome to Our Services</h2>
<p class="text-gray-700 dark:text-gray-300 mt-2">Explore our range of services tailored for your business needs.</p>
<a href="#" class="mt-4 inline-block bg-blue-500 text-white font-bold py-2 px-4 rounded-lg shadow hover:bg-blue-600">Get Started</a>
</div>
</div>
</div>
<footer class="text-center py-4 bg-gray-200 dark:bg-gray-700">
<p class="text-gray-800 dark:text-white">© 2023 My Company</p>
</footer>
</div>Composants associés
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.
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.