Rétro Vintage Mega Menu
Un composant de méga menu réactif conçu dans un style rétro/vintage inspiré de l’esthétique des années 80 et 90, avec une prise en charge du thème sombre et des images de remplacement.
HTML Code
<nav class="bg-gray-800 text-white p-4 dark:bg-gray-900">
<div class="container mx-auto flex justify-between items-center">
<div class="text-2xl font-bold">
Retro Menu
</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="hover:text-gray-400 transition duration-200">Home</a>
<a href="#" class="hover:text-gray-400 transition duration-200">About</a>
<a href="#" class="hover:text-gray-400 transition duration-200">Services</a>
<a href="#" class="hover:text-gray-400 transition duration-200">Contact</a>
<div class="relative group">
<button class="hover:text-gray-400 transition duration-200">
More
</button>
<div class="absolute left-0 hidden bg-gray-800 text-white group-hover:block transition duration-200 rounded shadow-lg">
<div class="p-4">
<h3 class="text-lg font-semibold">Categories</h3>
<div class="flex flex-col mt-2 space-y-2">
<a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
<img src="https://picsum.photos/40/40?random=1" alt="Category 1" class="rounded-full">
<span>Category 1</span>
</a>
<a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
<img src="https://picsum.photos/40/40?random=2" alt="Category 2" class="rounded-full">
<span>Category 2</span>
</a>
<a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
<img src="https://picsum.photos/40/40?random=3" alt="Category 3" class="rounded-full">
<span>Category 3</span>
</a>
<a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
<img src="https://picsum.photos/40/40?random=4" alt="Category 4" class="rounded-full">
<span>Category 4</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="md:hidden">
<button class="hover:text-gray-400 transition duration-200">
Menu
</button>
</div>
</div>
</nav>
<div class="bg-gray-100 dark:bg-gray-800">
<div class="container mx-auto p-6">
<h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Featured Items</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
<img src="https://picsum.photos/400/300?random=5" alt="Featured Item 1" class="w-full">
<div class="p-4">
<h3 class="text-lg font-bold text-gray-900 dark:text-white">Featured Item 1</h3>
<p class="text-gray-600 dark:text-gray-300">Description of the item goes here.</p>
</div>
</div>
<div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
<img src="https://picsum.photos/400/300?random=6" alt="Featured Item 2" class="w-full">
<div class="p-4">
<h3 class="text-lg font-bold text-gray-900 dark:text-white">Featured Item 2</h3>
<p class="text-gray-600 dark:text-gray-300">Description of the item goes here.</p>
</div>
</div>
<div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
<img src="https://picsum.photos/400/300?random=7" alt="Featured Item 3" class="w-full">
<div class="p-4">
<h3 class="text-lg font-bold text-gray-900 dark:text-white">Featured Item 3</h3>
<p class="text-gray-600 dark:text-gray-300">Description of the item goes here.</p>
</div>
</div>
</div>
</div>
</div>
<style>
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
color: white;
}
}
</style>Composants associés
Glassmorphism Mega Menu Component
Glassmorphism Mega Menu pour les interfaces de tableau de bord avec palette de couleurs triadique. Dispose d’un effet de verre givré, d’un design réactif et d’une prise en charge du mode sombre à l’aide de Tailwind CSS.
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.
Méga Menu en mode sombre simple
Un composant de méga-menu simple et réactif pour les sites Web d’entreprise utilisant le mode sombre avec une palette de couleurs complémentaire. Construit avec Tailwind CSS, avec prise en charge du thème sombre et sans JavaScript.