Composant Mega Menu
Un composant de méga menu minimaliste conçu pour présenter des travaux ou des produits avec un support à thème sombre.
HTML Code
<nav class="bg-white dark:bg-gray-800 shadow-md">
<div class="max-w-screen-xl mx-auto px-4 py-2 flex justify-between items-center">
<h1 class="text-xl font-bold text-gray-800 dark:text-white">Portfolio</h1>
<div class="relative">
<button class="text-gray-700 dark:text-gray-300 focus:outline-none">
Menu
</button>
<div class="absolute left-0 z-10 hidden bg-white dark:bg-gray-800 shadow-lg rounded-lg mt-2 transition-opacity ease-in-out duration-200">
<div class="grid grid-cols-3 gap-4 p-4">
<div class="flex flex-col items-start">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Category 1</h2>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Item 1</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Item 2</a>
</div>
<div class="flex flex-col items-start">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Category 2</h2>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Item 1</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Item 2</a>
</div>
<div class="flex flex-col items-start">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">More</h2>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Contact</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">About</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<section class="bg-gray-100 dark:bg-gray-900 py-10">
<div class="max-w-screen-xl mx-auto px-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center">Featured Works</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Work 1">
<div class="p-4">
<h3 class="font-semibold text-gray-800 dark:text-white">Project Title 1</h3>
<p class="text-gray-600 dark:text-gray-300">Short description of the project.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=2" alt="Work 2">
<div class="p-4">
<h3 class="font-semibold text-gray-800 dark:text-white">Project Title 2</h3>
<p class="text-gray-600 dark:text-gray-300">Short description of the project.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=3" alt="Work 3">
<div class="p-4">
<h3 class="font-semibold text-gray-800 dark:text-white">Project Title 3</h3>
<p class="text-gray-600 dark:text-gray-300">Short description of the project.</p>
</div>
</div>
</div>
</div>
</section>Composants associés
Composant Mega Menu
Un méga menu réactif de style entreprise pour les plateformes éducatives, avec plusieurs catégories, des cours récents et des liens vers des ressources. Comprend la prise en charge du mode sombre et un design propre et digne de confiance avec une couleur d’accentuation.
Composant Mega Menu
Un composant de méga menu réactif conçu dans un style skeuomorphe avec une palette de couleurs en niveaux de gris pour les sites Web d’entreprise et d’entreprise. Il prend en charge le thème sombre et utilise Tailwind CSS pour le style.
Glassmorphism_Pastel_Mega_Menu
Un composant de méga menu simple et réactif avec un design glassmorphism, une palette de couleurs pastel et une prise en charge du mode sombre, adapté à la navigation sur le tableau de bord. Comporte des éléments givrés et translucides avec des effets de flou.