Mega Menù | Code Components Hub

Componente Mega Menu

Componente Mega Menu con interfaccia utente in modalità oscura, combinazione di colori analoga e complessità complessa per scopi di dashboard, utilizzando Tailwind CSS. Dovrebbe essere reattivo e supportare il tema scuro utilizzando il prefisso Tailwind dark:. Non è necessario alcun codice JavaScript, solo HTML con classi Tailwind. Le immagini provengono da picsum.photos e gli avatar da randomuser.me.

Apri anteprima

                <nav class="relative bg-[#1a202c] dark:bg-[#0e131d] shadow-lg">
    <div class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between h-16">
            <div class="flex">
                <div class="flex-shrink-0 flex items-center">
                    <a href="#" class="text-white text-2xl font-bold">Dashboard</a>
                </div>
                <div class="hidden md:ml-6 md:flex md:space-x-8">
                    <a href="#" class="border-b-2 border-indigo-500 text-white dark:text-gray-300 px-3 py-2 text-sm font-medium">Home</a>
                    <a href="#" class="text-gray-300 dark:text-gray-500 hover:border-gray-300 hover:text-white dark:hover:text-gray-300 px-3 py-2 text-sm font-medium">Analytics</a>
                    <a href="#" class="text-gray-300 dark:text-gray-500 hover:border-gray-300 hover:text-white dark:hover:text-gray-300 px-3 py-2 text-sm font-medium">Reports</a>
                    <div class="relative group">
                        <button class="text-gray-300 dark:text-gray-500 hover:border-gray-300 hover:text-white dark:hover:text-gray-300 px-3 py-2 text-sm font-medium flex items-center">
                            Products
                            <svg class="ml-2 h-5 w-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                            </svg>
                        </button>
                        <div class="absolute z-10 -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2 hidden group-hover:block">
                            <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
                                <div class="relative grid gap-6 bg-gray-800 dark:bg-gray-900 px-5 py-6 sm:gap-8 sm:p-8">
                                    <a href="#" class="flex items-start -m-3 p-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800">
                                        <div class="flex-shrink-0 h-6 w-6 text-indigo-400">
                                            <!-- Heroicon name: light bulb -->
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 20v-3m0 0l-1.673-1.673M12 17l1.673-1.673M11 10V6m0 0L8.327 7.673M11 6l1.673 1.673m-1.673 4h4.673" />
                                            </svg>
                                        </div>
                                        <div class="ml-4">
                                            <p class="text-base font-medium text-white">Product A</p>
                                            <p class="mt-1 text-sm text-gray-400">Description for Product A.</p>
                                        </div>
                                    </a>
                                    <a href="#" class="flex items-start -m-3 p-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800">
                                        <div class="flex-shrink-0 h-6 w-6 text-indigo-400">
                                            <!-- Heroicon name: light bulb -->
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
                                            </svg>
                                        </div>
                                        <div class="ml-4">
                                            <p class="text-base font-medium text-white">Product B</p>
                                            <p class="mt-1 text-sm text-gray-400">Description for Product B.</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hidden md:ml-6 md:flex md:items-center">
                <button class="bg-gray-700 dark:bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
                    <span class="sr-only">View notifications</span>
                    <!-- Heroicon name: bell -->
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                    </svg>
                </button>
                <div class="ml-3 relative">
                    <div>
                        <button type="button" class="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                            <span class="sr-only">Open user menu</span>
                            <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                        </button>
                    </div>
                </div>
            </div>
            <div class="-mr-2 flex md:hidden">
                <!-- Mobile menu button -->
                <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
                    <span class="sr-only">Open main menu</span>
                    <!--
                        Icon when menu is closed.

                        Heroicon name: outline/menu

                        Menu open: "hidden", Menu closed: "block"
                    -->
                    <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                    <!--
                        Icon when menu is open.

                        Heroicon name: outline/x

                        Menu open: "block", Menu closed: "hidden"
                    -->
                    <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Mobile menu, show/hide based on menu state. -->
    <div class="md:hidden" id="mobile-menu">
        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Home</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Analytics</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Reports</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Products</a>
        </div>
        <div class="pt-4 pb-3 border-t border-gray-700">
            <div class="flex items-center px-5">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                </div>
                <div class="ml-3">
                    <div class="text-base font-medium text-white">John Doe</div>
                    <div class="text-sm font-medium text-gray-400">[email protected]</div>
                </div>
                <button type="button" class="ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
                    <span class="sr-only">View notifications</span>
                    <!-- Heroicon name: bell -->
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                    </svg>
                </button>
            </div>
            <div class="mt-3 px-2 space-y-1">
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Your Profile</a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</a>
            </div>
        </div>
    </div>
</nav>

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.

Apri anteprima

                <nav class="bg-gray-950 text-white p-4">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-2xl font-bold">ShopName</a>
    <div class="hidden md:flex space-x-6">
      <div class="relative group">
        <button class="hover:text-gray-300">Categories</button>
        <div class="absolute hidden group-hover:block bg-gray-900 shadow-lg mt-2 p-4 rounded-md w-48">
          <a href="#" class="block py-2 hover:bg-gray-800">Electronics</a>
          <a href="#" class="block py-2 hover:bg-gray-800">Apparel</a>
          <a href="#" class="block py-2 hover:bg-gray-800">Home Goods</a>
        </div>
      </div>
      <a href="#" class="hover:text-gray-300">New Arrivals</a>
      <a href="#" class="hover:text-gray-300">Sales</a>
      <a href="#" class="hover:text-gray-300">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="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"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

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.

Apri anteprima

                <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>

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.

Apri anteprima

                <nav class="bg-white shadow-lg dark:bg-gray-800">
    <div class="container mx-auto px-4">
        <div class="flex justify-between items-center py-4">
            <div>
                <a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">Dashboard</a>
            </div>
            <div class="hidden md:flex items-center space-x-1">
                <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Home</a>
                <div class="relative group">
                    <button class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Products</button>
                    <div class="absolute z-30 top-full left-0 w-64 rounded-md shadow-lg bg-white dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 1</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 2</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 3</a>
                    </div>
                </div>
                <div class="relative group">
                    <button class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Services</button>
                    <div class="absolute z-30 top-full left-0 w-64 rounded-md shadow-lg bg-white dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 1</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 2</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 3</a>
                    </div>
                </div>
                <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">About</a>
                <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Contact</a>
            </div>
            <div class="md:hidden flex items-center">
                <button class="mobile-menu-button">
                    <svg class="w-6 h-6 text-gray-500 hover:text-green-500 dark:text-gray-200 dark:hover:text-green-500" 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 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>
    <div class="mobile-menu hidden md:hidden bg-white dark:bg-gray-800">
        <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Home</a>
        <div class="relative group">
            <button class="block w-full text-left py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Products</button>
            <div class="relative bg-white dark:bg-gray-700">
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 1</a>
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 2</a>
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 3</a>
            </div>
        </div>
        <div class="relative group">
            <button class="block w-full text-left py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Services</button>
            <div class="relative bg-white dark:bg-gray-700">
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 1</a>
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 2</a>
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 3</a>
            </div>
        </div>
        <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">About</a>
        <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Contact</a>
    </div>
</nav>

Componente Mega Menu

Un componente Mega Menu in stile Neumorfismo con una combinazione di colori monocromatica progettata per blog e consumo di contenuti. Supporta il design reattivo con la modalità oscura.

Apri anteprima

                <header class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
  <nav class="container mx-auto flex justify-between items-center">
    <div class="flex items-center space-x-8">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">My Blog</h1>
      <div class="hidden md:flex space-x-6">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 transition">Home</a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 transition">About</a>
        <div class="relative group">
          <button class="text-gray-600 dark:text-gray-300 focus:outline-none hover:text-gray-800 dark:hover:text-gray-100 transition">Categories</button>
          <div class="absolute left-0 z-10 hidden w-48 bg-white dark:bg-gray-700 rounded-lg shadow-lg group-hover:block">
            <ul class="py-2">
              <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Web Development</a></li>
              <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Design</a></li>
              <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Marketing</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="hidden md:block">
      <a href="#" class="relative inline-block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 transition">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
      </a>
    </div>
    <div class="md:hidden">
      <button class="text-gray-600 dark:text-gray-300 focus:outline-none">
        <!-- Hamburger icon -->
        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </nav>
</header>

<main class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg mt-4">
  <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Recent Posts</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/500/300?random=1" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
      <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 1</h3>
      <p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/500/300?random=2" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
      <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 2</h3>
      <p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/500/300?random=3" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
      <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 3</h3>
      <p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/500/300?random=4" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
      <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 4</h3>
      <p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
    </div>
  </div>
</main>

Componente Mega Menu

Un componente Mega Menu reattivo progettato per blog/consumo di contenuti, con microinterazioni e un focus sui colori del tono della terra, con supporto per la modalità oscura utilizzando Tailwind CSS.

Apri anteprima

                <div class="bg-white dark:bg-gray-800 relative group">
    <div class="container mx-auto p-4">
        <nav class="flex justify-between items-center">
            <div class="text-2xl font-semibold text-brown-600 dark:text-green-200">
                Blog Title
            </div>
            <div class="hidden md:flex space-x-8">
                <a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Home</a>
                <a href="#" class="relative transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Categories
                    <div class="absolute inset-x-0 bottom-0 h-0.5 bg-brown-600 dark:bg-green-200 transition duration-300 ease-in-out transform scale-x-0 group-hover:scale-x-100"></div>
                </a>
                <a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">About</a>
                <a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Contact</a>
            </div>
            <div class="md:hidden">
                <button class="text-brown-600 dark:text-green-200 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 12h16M4 18h16" />
                    </svg>
                </button>
            </div>
        </nav>
    </div>
    <div class="absolute hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 w-full rounded-lg overflow-hidden transition-opacity duration-300 ease-in-out">
        <div class="container mx-auto p-6">
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <h2 class="font-bold text-lg text-brown-600 dark:text-green-200">Latest Posts</h2>
                    <ul class="space-y-2">
                        <li>
                            <a href="#" class="flex items-center space-x-2 transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">
                                <img src="https://picsum.photos/50" alt="Post 1" class="h-10 w-10 rounded-full">
                                <span>Understanding Earth Tones in Design</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center space-x-2 transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">
                                <img src="https://picsum.photos/50" alt="Post 2" class="h-10 w-10 rounded-full">
                                <span>The Beauty of Nature-Inspired Living</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div>
                    <h2 class="font-bold text-lg text-brown-600 dark:text-green-200">Categories</h2>
                    <ul class="space-y-2">
                        <li><a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Lifestyle</a></li>
                        <li><a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Travel</a></li>
                        <li><a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Food</a></li>
                        <li><a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Wellness</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Componente Mega Menu Glassmorphism

Glassmorphism Mega Menu per Dashboard si interfaccia con la combinazione di colori Triadic. Presenta un effetto vetro smerigliato, un design reattivo e il supporto della modalità oscura utilizzando Tailwind CSS.

Apri anteprima

                <nav class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white py-4 px-6 sticky top-0 z-50 dark:bg-black dark:bg-opacity-30">
    <div class="container mx-auto flex justify-between items-center">
        <a href="#" class="text-xl font-bold text-blue-600 dark:text-blue-400">Dashboard</a>
        <div class="hidden md:flex space-x-6">
            <div class="relative group">
                <button class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 cursor-default">Data</button>
                <div class="absolute hidden group-hover:block backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white p-6 rounded-lg shadow-lg mt-2 dark:bg-black dark:bg-opacity-30">
                    <div class="grid grid-cols-2 gap-4">
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Overview</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Reports</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Analytics</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Trends</a>
                    </div>
                </div>
            </div>
            <div class="relative group">
                <button class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 cursor-default">Management</button>
                <div class="absolute hidden group-hover:block backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white p-6 rounded-lg shadow-lg mt-2 dark:bg-black dark:bg-opacity-30">
                    <div class="grid grid-cols-2 gap-4">
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Users</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Settings</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Permissions</a>
                    </div>
                </div>
            </div>
            <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Settings</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Help</a>
        </div>
        <button class="md:hidden text-gray-800 dark:text-gray-200 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 12h16M4 18h16"></path></svg>
        </button>
    </div>
    <div class="hidden md:hidden mobile-menu">
        <a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Data</a>
        <a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Management</a>
        <a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Settings</a>
        <a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Help</a>
    </div>
</nav>

Componente Mega Menu

Un componente Mega Menu reattivo progettato in uno stile scheumorfico con una combinazione di colori in scala di grigi per siti Web aziendali e aziendali. Supporta il tema scuro e utilizza Tailwind CSS per lo stile.

Apri anteprima

                <div class="bg-gray-100 dark:bg-gray-900 p-5 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Services</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
        <div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow">
            <img src="https://picsum.photos/200/150?random=1" alt="Service 1" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Consulting</h3>
            <p class="text-gray-600 dark:text-gray-400">Professional consulting services to help you grow.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow">
            <img src="https://picsum.photos/200/150?random=2" alt="Service 2" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Marketing</h3>
            <p class="text-gray-600 dark:text-gray-400">Effective marketing strategies tailored to your needs.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow">
            <img src="https://picsum.photos/200/150?random=3" alt="Service 3" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Support</h3>
            <p class="text-gray-600 dark:text-gray-400">24/7 support to assist with your queries.</p>
        </div>
    </div>
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mt-8">About Us</h2>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
        <p class="text-gray-600 dark:text-gray-400">Our team is dedicated to providing exceptional service and value.</p>
    </div>
</div>

Componente Mega Menu

Un componente Mega Menu in stile neumorfico per un sito portfolio, progettato con una combinazione di colori in scala di grigi e supporto per temi scuri reattivi utilizzando Tailwind CSS.

Apri anteprima

                <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>

Skeuomorphism Social Media Mega Menu

Componente Mega Menu con design Skeuomorphism, combinazione di colori triadici e complessità semplice per scopi di social media. Reattivo con supporto per il tema scuro.

Apri anteprima

                <nav class="bg-gray-200 dark:bg-gray-800 shadow-lg">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center py-4">
      <div class="text-gray-800 dark:text-white text-xl font-bold">SocialHub</div>
      <div class="hidden md:flex space-x-6">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Feed</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 transition duration-300">Profile</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-300">Messages</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-300">Notifications</a>
      </div>
      <div class="md:hidden">
        <button class="text-gray-700 dark:text-gray-300 focus:outline-none">
          <svg class="h-6 w-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"></path></svg>
        </button>
      </div>
    </div>
  </div>
</nav>