Componente Mega Menu
Un componente mega menu reattivo progettato per blog o consumo di contenuti, con elementi di design 3D e colori dai toni della terra, con supporto per temi scuri.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Blog Categories</h2>
<nav class="relative mt-4">
<ul class="flex space-x-6">
<li class="group relative">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-200 transition duration-150">Category 1</a>
<div class="absolute left-0 z-10 hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg group-hover:block">
<div class="p-4 space-y-4">
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 1-1</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 1-2</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 1-3</a>
</div>
</div>
</li>
<li class="group relative">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-200 transition duration-150">Category 2</a>
<div class="absolute left-0 z-10 hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg group-hover:block">
<div class="p-4 space-y-4">
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 2-1</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 2-2</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 2-3</a>
</div>
</div>
</li>
<li class="group relative">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-200 transition duration-150">Category 3</a>
<div class="absolute left-0 z-10 hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg group-hover:block">
<div class="p-4 space-y-4">
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 3-1</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 3-2</a>
<a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 3-3</a>
</div>
</div>
</li>
</ul>
</nav>
<div class="mt-8">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Featured Posts</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/300/200" alt="Featured Post" class="w-full h-48 object-cover">
<div class="p-4">
<h4 class="font-semibold text-gray-800 dark:text-gray-200">Post Title 1</h4>
<p class="text-gray-600 dark:text-gray-400">Brief description of the post content...</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/300/201" alt="Featured Post" class="w-full h-48 object-cover">
<div class="p-4">
<h4 class="font-semibold text-gray-800 dark:text-gray-200">Post Title 2</h4>
<p class="text-gray-600 dark:text-gray-400">Brief description of the post content...</p>
</div>
</div>
</div>
</div>
<div class="mt-8">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Authors</h3>
<div class="flex space-x-4 mt-4">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author" class="w-10 h-10 rounded-full">
<span class="text-gray-800 dark:text-gray-200">Author 1</span>
</div>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author" class="w-10 h-10 rounded-full">
<span class="text-gray-800 dark:text-gray-200">Author 2</span>
</div>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Author" class="w-10 h-10 rounded-full">
<span class="text-gray-800 dark:text-gray-200">Author 3</span>
</div>
</div>
</div>
</div>Componenti correlati
Componente Mega Menu
Un semplice componente di menu per l'e-commerce in modalità scura con una combinazione di colori in scala di grigi, costruito utilizzando Tailwind CSS. È reattivo e include il supporto per il tema scuro utilizzando il prefisso dark: di Tailwind.
Mega menu retrò
Un componente mega menu in stile retrò/vintage con effetti reattivi e supporto per temi scuri, implementato utilizzando Tailwind CSS. Non è incluso alcun JavaScript. La modalità oscura viene gestita esclusivamente con CSS.
Componente Mega Menu
Componente Mega Menu con design minimalista/piatto, combinazione di colori vivaci, livello di complessità complesso, per scopi di dashboard, utilizzando Tailwind CSS. Design reattivo con supporto per temi scuri. Nessun codice JavaScript, solo HTML con le classi Tailwind. La modalità oscura utilizza il prefisso dark: di Tailwind per lo stile. Le immagini utilizzano picsum.photos e randomuser.me per gli avatar.