Componente Mega Menu
Un componente Mega Menu reattivo progettato nell'interfaccia utente in modalità oscura con una combinazione di colori in scala di grigi per le interfacce dei social media.
Codice HTML
<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>Componenti correlati
Componente Mega Menu - E-commerce Neumorphic Vibrant
Un componente di mega menu complesso e reattivo, progettato con uno stile di e-commerce neutro e vivace. Presenta più colonne, esempi di immagini ed elenchi di categorie, con supporto completo della modalità scura.
Componente Mega Menu - Foresta/Verde, Microinterazioni, Senza scopo di lucro
Un componente mega menu reattivo progettato per siti Web senza scopo di lucro/beneficenza, con una tavolozza di colori foresta/verde, microinterazioni al passaggio del mouse e supporto completo per la modalità oscura. Fornisce sezioni per "La nostra missione", "Come aiutiamo", "Eventi e notizie" e "Partecipa".
Semplice modalità scura Mega Menu
Un componente di mega menu semplice e reattivo per siti Web aziendali che utilizzano la modalità scura con una combinazione di colori complementare. Costruito con Tailwind CSS, con supporto per temi scuri e senza JavaScript.