Composant Mega Menu
Un composant de méga menu de style neumorphique pour un site de portfolio, conçu avec un schéma de couleurs en niveaux de gris et une prise en charge réactive du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-shadow duration-300">
<div class="flex justify-between items-center">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Portfolio</h1>
<button class="bg-gray-200 dark:bg-gray-700 rounded-full p-2 shadow-md transition-shadow duration-300 hover:shadow-lg dark:hover:shadow-lg">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile" class="w-8 h-8 rounded-full">
</button>
</div>
<nav class="mt-6">
<ul class="flex space-x-4">
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-300">Home</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-300">About</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-300">Projects</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-300">Contact</a>
</li>
</ul>
</nav>
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/150" alt="Project Image" class="w-full h-32 object-cover rounded-md mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the project.</p>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/150?random=1" alt="Project Image" class="w-full h-32 object-cover rounded-md mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the project.</p>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/150?random=2" alt="Project Image" class="w-full h-32 object-cover rounded-md mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the project.</p>
</div>
</div>
</div>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.
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.
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.