Componente Mega Menu
Un componente Mega Menu reattivo con stile Skeuomorphism, con supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
<div class="flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-3">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Website</h1>
</div>
<button class="text-gray-800 dark:text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
</svg>
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 1</h2>
<ul class="mt-2">
<li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
</ul>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 2</h2>
<ul class="mt-2">
<li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
</ul>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 3</h2>
<ul class="mt-2">
<li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
</ul>
</div>
</div>
<div class="mt-6">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Featured Users</h2>
<div class="flex space-x-4 mt-2">
<div class="flex flex-col items-center">
<img src="https://picsum.photos/50/50" alt="User 1" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
<span class="text-gray-800 dark:text-gray-200">User 1</span>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/50/50" alt="User 2" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
<span class="text-gray-800 dark:text-gray-200">User 2</span>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/50/50" alt="User 3" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
<span class="text-gray-800 dark:text-gray-200">User 3</span>
</div>
</div>
</div>
</div>Componenti correlati
Componente Mega Menu
Un componente Mega Menu con uno stile di design brutalista, caratterizzato da una combinazione di colori monocromatica e un design reattivo adatto per un blog o una piattaforma di contenuti.
Componente Mega Menu
Un componente Mega Menu reattivo progettato con lo stile Glassmorphism, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, che supportano temi scuri utilizzando Tailwind CSS.