Composant Mega Menu
Un composant de méga menu réactif conçu dans l’interface utilisateur du mode sombre avec une palette de couleurs en niveaux de gris pour les interfaces de médias sociaux.
HTML Code
<div class="bg-gray-900 text-white p-5">
<div class="container mx-auto">
<div class="flex justify-between items-center">
<h1 class="text-xl font-bold">Social Media</h1>
<nav class="hidden md:flex space-x-4">
<a href="#" class="hover:underline">Home</a>
<a href="#" class="hover:underline">Profile</a>
<a href="#" class="hover:underline">Messages</a>
<a href="#" class="hover:underline">Settings</a>
</nav>
<div class="md:hidden cursor-pointer">
<span class="block w-6 h-1 bg-white mb-1"></span>
<span class="block w-6 h-1 bg-white mb-1"></span>
<span class="block w-6 h-1 bg-white"></span>
</div>
</div>
<div class="mt-5 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-gray-800 p-4 rounded-lg flex flex-col items-center">
<img src="https://picsum.photos/200/150" alt="Image 1" class="rounded-lg mb-3">
<p class="text-center">Title 1</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg flex flex-col items-center">
<img src="https://picsum.photos/200/150" alt="Image 2" class="rounded-lg mb-3">
<p class="text-center">Title 2</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg flex flex-col items-center">
<img src="https://picsum.photos/200/150" alt="Image 3" class="rounded-lg mb-3">
<p class="text-center">Title 3</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-800 text-gray-300 p-5">
<div class="container mx-auto">
<h2 class="text-lg font-semibold">User Profiles</h2>
<div class="mt-4 grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="rounded-full w-16 h-16 mb-3">
<p class="text-center">User 1</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 2" class="rounded-full w-16 h-16 mb-3">
<p class="text-center">User 2</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User 3" class="rounded-full w-16 h-16 mb-3">
<p class="text-center">User 3</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User 4" class="rounded-full w-16 h-16 mb-3">
<p class="text-center">User 4</p>
</div>
</div>
</div>
</div>Composants associés
Composant de menu Neumorphic Mega
Un composant de méga menu neumorphe avec un comportement réactif et une prise en charge du mode sombre.
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.