Cerca componenti

Categorie

Componenti Mega Menù

Mega Menù

Ampio pannello a discesa che mostra più opzioni di navigazione

Componente Mega Menu

Un mega menu reattivo in stile aziendale per piattaforme educative, con più categorie, corsi recenti e collegamenti alle risorse. Include il supporto per la modalità oscura e un design pulito e affidabile con un colore d'accento.

Aperto Anteprima

                <nav class="bg-white shadow-lg dark:bg-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <a href="#" class="text-2xl font-bold text-gray-900 dark:text-white">Edu<span class="text-indigo-600">Hub</span></a>
        </div>
        <div class="hidden md:ml-6 md:flex md:space-x-8">
          <div class="relative group">
            <button class="text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium flex items-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
              Categories
              <svg class="ml-2 -mr-0.5 h-4 w-4" 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="hidden group-hover:block absolute z-50 mt-3 transform -translate-x-1/2 left-1/2 w-screen max-w-4xl px-2 sm:px-0">
              <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
                <div class="relative grid gap-6 bg-white dark:bg-gray-900 px-5 py-6 sm:gap-8 sm:p-8 md:grid-cols-2 lg:grid-cols-3">
                  <div>
                    <h3 class="text-sm font-medium uppercase tracking-wide text-gray-500 dark:text-gray-300">Featured Courses</h3>
                    <nav class="mt-4 grid gap-y-2">
                      <a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
                        <div class="flex-shrink-0 h-6 w-6 text-indigo-600">
                          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19v-7a2 2 0 012-2h10a2 2 0 012 2v7m-7 4v-4m0 0H9m5 0h2" /></svg>
                        </div>
                        <div class="ml-4">
                          <p class="text-base font-medium text-gray-900 dark:text-white">Data Science Masterclass</p>
                          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Learn data analysis, machine learning, and AI.</p>
                        </div>
                      </a>
                      <a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
                        <div class="flex-shrink-0 h-6 w-6 text-indigo-600">
                          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-2.414-2.414A1 1 0 0015.586 6H7a2 2 0 00-2 2v11a2 2 0 002 2z" /></svg>
                        </div>
                        <div class="ml-4">
                          <p class="text-base font-medium text-gray-900 dark:text-white">Web Development Bootcamp</p>
                          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Build modern websites with HTML, CSS, JavaScript.</p>
                        </div>
                      </a>
                      <a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
                        <div class="flex-shrink-0 h-6 w-6 text-indigo-600">
                          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2zm0 0H9m7 0a2 2 0 002-2V5a2 2 0 00-2-2h-2a2 2 0 00-2 2v14a2 2 0 002 2h2a2 2 0 002-2z" /></svg>
                        </div>
                        <div class="ml-4">
                          <p class="text-base font-medium text-gray-900 dark:text-white">Digital Marketing Fundamentals</p>
                          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Master SEO, SEM, social media, and more.</p>
                        </div>
                      </a>
                    </nav>
                  </div>
                  <div>
                    <h3 class="text-sm font-medium uppercase tracking-wide text-gray-500 dark:text-gray-300">Browse by Topic</h3>
                    <nav class="mt-4 grid gap-y-2">
                      <a href="#" class="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
                        <p class="text-base font-medium text-gray-900 dark:text-white">Programming</p>
                      </a>
                      <a href="#" class="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
                        <p class="text-base font-medium text-gray-900 dark:text-white">Business & Finance</p>
                      </a>
                      <a href="#" class="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
                        <p class="text-base font-medium text-gray-900 dark:text-white">Design & Creativity</p>
                      </a>
                      <a href="#" class="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
                        <p class="text-base font-medium text-gray-900 dark:text-white">Health & Fitness</p>
                      </a>
                      <a href="#" class="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800">
                        <p class="text-base font-medium text-gray-900 dark:text-white">Language Learning</p>
                      </a>
                    </nav>
                  </div>
                  <div>
                    <h3 class="text-sm font-medium uppercase tracking-wide text-gray-500 dark:text-gray-300">Newest Releases</h3>
                    <div class="mt-4 space-y-4">
                      <div class="flex items-center space-x-4">
                        <img class="h-16 w-24 object-cover rounded-lg" src="https://picsum.photos/id/1018/300/200" alt="Course thumbnail">
                        <div>
                          <a href="#" class="text-sm font-medium text-gray-900 hover:text-indigo-600 dark:text-white dark:hover:text-indigo-400">Advanced Python for AI</a>
                          <p class="text-xs text-gray-500 dark:text-gray-400">Dr. Emily White</p>
                        </div>
                      </div>
                      <div class="flex items-center space-x-4">
                        <img class="h-16 w-24 object-cover rounded-lg" src="https://picsum.photos/id/1025/300/200" alt="Course thumbnail">
                        <div>
                          <a href="#" class="text-sm font-medium text-gray-900 hover:text-indigo-600 dark:text-white dark:hover:text-indigo-400">Financial Modeling with Excel</a>
                          <p class="text-xs text-gray-500 dark:text-gray-400">Prof. David Green</p>
                        </div>
                      </div>
                    </div>
                    <div class="mt-6 text-center">
                      <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-600">
                        View All Courses
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <a href="#" class="text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Learning Paths</a>
          <a href="#" class="text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">For Business</a>
          <div class="relative group">
            <button class="text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium flex items-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
              Resources
              <svg class="ml-2 -mr-0.5 h-4 w-4" 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="hidden group-hover:block absolute z-50 mt-3 transform -translate-x-1/2 left-1/2 w-48 px-2 pt-2 pb-4 sm:px-0">
              <div class="rounded-md shadow-lg ring-1 ring-black ring-opacity-5 py-1 bg-white dark:bg-gray-900">
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 hover:bg-gray-100">Blog</a>
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 hover:bg-gray-100">FAQs</a>
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 hover:bg-gray-100">Support</a>
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 hover:bg-gray-100">Partnerships</a>
              </div>
            </div>
          </div>
          <a href="#" class="text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About Us</a>
        </div>
      </div>
      <div class="flex items-center">
        <div class="hidden md:block">
          <div class="ml-4 flex items-center md:ml-6">
            <button type="button" class="p-1 rounded-full text-gray-400 hover:text-gray-700 dark:text-gray-300 dark: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>
              <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 stroke-linecap="round" stroke-linejoin="round" stroke-width="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 group">
              <div>
                <button type="button" class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm 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 class="hidden group-hover:block absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md shadow-lg py-1 bg-white dark:bg-gray-900 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 hover:bg-gray-100" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 hover:bg-gray-100" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 hover:bg-gray-100" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
              </div>
            </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-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" 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 stroke-linecap="round" stroke-linejoin="round" stroke-width="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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      </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-indigo-50 dark:bg-indigo-800 dark:bg-opacity-50 text-indigo-700 dark:text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Categories</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Learning Paths</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">For Business</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Resources</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">About Us</a>
    </div>
    <div class="pt-4 pb-3 border-t border-gray-200 dark: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-gray-800 dark:text-white">Tom Cook</div>
          <div class="text-sm font-medium text-gray-500 dark:text-gray-400">[email protected]</div>
        </div>
        <button type="button" class="ml-auto flex-shrink-0 bg-white 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>
          <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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 203 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 space-y-1 px-2">
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Your Profile</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Settings</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Sign out</a>
      </div>
    </div>
  </div>
</nav>

Mega Menu per l'e-commerce brutalista

Un mega menu complesso, in stile brutalista, per l'e-commerce, caratterizzato da un contrasto elevato e toni di blu professionali. Completamente reattivo con supporto per la modalità scura.

Aperto Anteprima

                <nav class="bg-blue-950 dark:bg-zinc-900 border-b-8 border-yellow-400 dark:border-yellow-600 font-mono relative z-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-20 items-center">
      <div class="flex items-center">
        <a href="#" class="text-yellow-400 dark:text-yellow-600 text-3xl font-extrabold tracking-tighter uppercase border-r-4 border-yellow-400 dark:border-yellow-600 pr-4">BRUTAL<span class="block text-blue-300 dark:text-blue-500 text-sm normal-case font-normal leading-none -mt-1">Store</span></a>
      </div>
      <div class="hidden md:flex items-center space-x-12">
        <div x-data="{ open: false }" class="relative group">
          <button @click="open = !open" @mouseleave="open = false" class="text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white uppercase font-bold text-lg tracking-wider transition duration-150 ease-in-out py-2 border-b-4 border-transparent hover:border-blue-400 dark:hover:border-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70">Categories</button>
          <div x-show="open" @click.outside="open = false" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-200 transform" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-2" class="absolute left-0 mt-4 w-[900px] bg-blue-900 dark:bg-zinc-800 border-8 border-yellow-400 dark:border-yellow-600 shadow-2xl origin-top-left p-8 grid grid-cols-4 gap-8 text-white brutal-mega-menu" style="display: none;">
            <div>
              <h3 class="text-yellow-400 dark:text-yellow-600 uppercase font-extrabold text-xl mb-4 border-b-4 border-blue-400 dark:border-blue-600 pb-2">Electronics</h3>
              <ul class="space-y-2">
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Smartphones</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Laptops</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Cameras</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Gaming Consoles</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Wearables</a></li>
              </ul>
            </div>
            <div>
              <h3 class="text-yellow-400 dark:text-yellow-600 uppercase font-extrabold text-xl mb-4 border-b-4 border-blue-400 dark:border-blue-600 pb-2">Apparel</h3>
              <ul class="space-y-2">
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Men's</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Women's</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Kids'</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Accessories</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Footwear</a></li>
              </ul>
            </div>
            <div>
              <h3 class="text-yellow-400 dark:text-yellow-600 uppercase font-extrabold text-xl mb-4 border-b-4 border-blue-400 dark:border-blue-600 pb-2">Home & Kitchen</h3>
              <ul class="space-y-2">
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Furniture</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Decor</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Cookware</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Appliances</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Bedding</a></li>
              </ul>
            </div>
            <div class="flex flex-col justify-between">
              <div class="bg-blue-700 dark:bg-zinc-700 p-4 border-4 border-blue-400 dark:border-blue-600 shadow-lg">
                <img src="https://picsum.photos/300/200?random=1" alt="Featured Product" class="w-full h-32 object-cover object-center border-4 border-yellow-400 dark:border-yellow-600 mb-4 brutal-image">
                <h4 class="text-yellow-400 dark:text-yellow-600 text-lg font-bold mb-2">Weekly Deals!</h4>
                <p class="text-blue-100 dark:text-blue-300 text-sm mb-4">Don't miss out on our limited time offers. New discounts added every Monday!</p>
                <a href="#" class="inline-block px-4 py-2 bg-yellow-400 dark:bg-yellow-600 text-blue-950 dark:text-zinc-900 font-bold uppercase text-sm hover:bg-yellow-500 dark:hover:bg-yellow-700 transition-colors duration-200 border-2 border-transparent hover:border-blue-950 dark:hover:border-zinc-900 brutal-button">Shop Now</a>
              </div>
            </div>
          </div>
        </div>
        <a href="#" class="text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white uppercase font-bold text-lg tracking-wider transition duration-150 ease-in-out py-2 border-b-4 border-transparent hover:border-blue-400 dark:hover:border-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70">New Arrivals</a>
        <a href="#" class="text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white uppercase font-bold text-lg tracking-wider transition duration-150 ease-in-out py-2 border-b-4 border-transparent hover:border-blue-400 dark:hover:border-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70">Sale</a>
        <a href="#" class="text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white uppercase font-bold text-lg tracking-wider transition duration-150 ease-in-out py-2 border-b-4 border-transparent hover:border-blue-400 dark:hover:border-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70">Contact</a>
      </div>
      <div class="flex items-center space-x-6">
        <button class="relative text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70 transition duration-150 ease-in-out">
          <svg class="h-7 w-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H4A2 2 0 002 10v4a2 2 0 002 2h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2V6a4 4 0 00-4-4zm3 8V6a3 3 0 10-6 0v4h6z" clip-rule="evenodd"></path>
          </svg>
          <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-blue-950 dark:text-zinc-900 transform translate-x-1/2 -translate-y-1/2 bg-yellow-400 dark:bg-yellow-600 rounded-full border-2 border-blue-950 dark:border-zinc-900">3</span>
        </button>
        <button class="text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70 transition duration-150 ease-in-out">
          <img class="h-9 w-9 rounded-full border-4 border-blue-400 dark:border-blue-600 brutal-image" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        </button>
        <button type="button" class="md:hidden inline-flex items-center justify-center p-2 rounded-md text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white hover:bg-blue-800 dark:hover:bg-zinc-700 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70 transition duration-150 ease-in-out" aria-controls="mobile-menu" aria-expanded="false" x-data="{ open: false }" @click="open = !open">
          <span class="sr-only">Open main menu</span>
          <svg x-show="!open" class="block h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <svg x-show="open" class="hidden h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <div class="md:hidden" id="mobile-menu" x-data="{ open: false }">
      <div x-show="open" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="opacity-0 scale-y-95" x-transition:enter-end="opacity-100 scale-y-100" x-transition:leave="transition ease-in duration-200 transform" x-transition:leave-start="opacity-100 scale-y-100" x-transition:leave-end="opacity-0 scale-y-95" class="px-4 pt-2 pb-6 space-y-4 font-mono bg-blue-900 dark:bg-zinc-800 border-t-4 border-yellow-400 dark:border-yellow-600 brutal-mobile-menu" style="display: none;">
          <div x-data="{ subOpen: false }" class="relative">
              <button @click="subOpen = !subOpen" class="block uppercase font-bold text-lg text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white w-full text-left py-2 border-b-2 border-blue-800 dark:border-zinc-700 brutal-mobile-item focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70 flex justify-between items-center">
                  Categories
                  <svg class="h-5 w-5 transform" :class="{'rotate-180': subOpen}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                      <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 x-show="subOpen" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform -translate-y-2" x-transition:enter-end="opacity-100 transform translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform translate-y-0" x-transition:leave-end="opacity-0 transform -translate-y-2" class="pl-4 pr-2 pt-2 space-y-2 bg-blue-800 dark:bg-zinc-700 border-l-4 border-yellow-400 dark:border-yellow-600" style="display: none;">
                  <a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white uppercase text-md py-1 border-b border-blue-700 dark:border-zinc-600 last:border-0 brutal-mobile-sub-item">Electronics</a>
                  <a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white uppercase text-md py-1 border-b border-blue-700 dark:border-zinc-600 last:border-0 brutal-mobile-sub-item">Apparel</a>
                  <a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white uppercase text-md py-1 border-b border-blue-700 dark:border-zinc-600 last:border-0 brutal-mobile-sub-item">Home & Kitchen</a>
              </div>
          </div>
          <a href="#" class="block uppercase font-bold text-lg text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white py-2 brutal-mobile-item border-b-2 border-blue-800 dark:border-zinc-700 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70">New Arrivals</a>
          <a href="#" class="block uppercase font-bold text-lg text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white py-2 brutal-mobile-item border-b-2 border-blue-800 dark:border-zinc-700 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70">Sale</a>
          <a href="#" class="block uppercase font-bold text-lg text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white py-2 brutal-mobile-item focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70">Contact</a>
      </div>
  </div>
</nav>

<!-- Alpine.js is required for x-show and x-data directives -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

Componente Mega Menu - Incontri/Sociale

Un componente di mega menu semplice e reattivo progettato per piattaforme di appuntamenti/social, caratterizzato da microinterazioni e una combinazione di colori viola/viola. Include il supporto per la modalità oscura.

Aperto Anteprima

                <nav class="relative bg-white shadow-lg dark:bg-gray-900 transition-colors duration-300">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <a href="#" class="text-2xl font-bold text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 transition-colors duration-200">ConnectMe</a>
    
    <!-- Mobile menu button -->
    <div class="lg:hidden">
      <button id="mobile-menu-button" class="text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md p-2 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">
        <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>

    <!-- Desktop/Tablet Menu -->
    <div class="hidden lg:flex lg:items-center lg:space-x-8" id="desktop-menu">
      <div class="group relative">
        <button class="inline-flex items-center text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 font-medium py-2 px-3 rounded-md transition-all duration-200 group-hover:bg-purple-50 dark:group-hover:bg-gray-800">
          Discover
          <svg class="ml-2 w-4 h-4 transform group-hover:rotate-180 transition-transform duration-200" 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="M19 9l-7 7-7-7"></path>
          </svg>
        </button>
        <div class="absolute left-1/2 -translate-x-1/2 mt-2 w-64 bg-white dark:bg-gray-800 shadow-xl rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible group-hover:mt-3 transition-all duration-300 transform group-hover:scale-100 scale-95 origin-top z-10 p-4 border border-purple-100 dark:border-gray-700">
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-purple-50 dark:hover:bg-gray-700 hover:text-purple-600 dark:hover:text-purple-400 rounded-md transition-colors duration-200 group flex items-center space-x-2">
            <svg class="w-5 h-5 text-purple-500 group-hover:animate-bounce-y" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
            <span>Nearby Profiles</span>
          </a>
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-purple-50 dark:hover:bg-gray-700 hover:text-purple-600 dark:hover:text-purple-400 rounded-md transition-colors duration-200 group flex items-center space-x-2">
            <svg class="w-5 h-5 text-purple-500 group-hover:animate-pulse" 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="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
            <span>Instant Matches</span>
          </a>
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-purple-50 dark:hover:bg-gray-700 hover:text-purple-600 dark:hover:text-purple-400 rounded-md transition-colors duration-200 group flex items-center space-x-2">
            <svg class="w-5 h-5 text-purple-500 group-hover:scale-110 group-hover:rotate-12 transition-transform" 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.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
            <span>Who Likes You</span>
          </a>
        </div>
      </div>

      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200 font-medium py-2 px-3 rounded-md hover:bg-purple-50 dark:hover:bg-gray-800">Messages</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200 font-medium py-2 px-3 rounded-md hover:bg-purple-50 dark:hover:bg-gray-800">Events</a>
      <a href="#" class="text-purple-600 dark:text-purple-400 border border-purple-600 dark:border-purple-400 hover:bg-purple-600 hover:text-white dark:hover:bg-purple-400 dark:hover:text-gray-900 font-medium py-2 px-4 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 group relative overflow-hidden">
        <span class="relative z-10">Go Premium</span>
        <span class="absolute inset-0 bg-white dark:bg-gray-900 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform scale-50 group-hover:scale-100 rounded-full"></span>
      </a>
    </div>
  </div>

  <!-- Mobile Menu Content (initially hidden) -->
  <div id="mobile-menu" class="hidden lg:hidden bg-white dark:bg-gray-900 pb-4 border-t border-gray-200 dark:border-gray-700">
    <div class="px-4 pt-2 space-y-2">
      <button id="mobile-discover-button" class="w-full flex items-center justify-between text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 font-medium py-2 px-3 rounded-md hover:bg-purple-50 dark:hover:bg-gray-800 transition-colors duration-200">
        <span>Discover</span>
        <svg class="w-4 h-4 transform transition-transform duration-200" 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="M19 9l-7 7-7-7"></path>
        </svg>
      </button>
      <div id="mobile-discover-submenu" class="hidden pl-4 space-y-2">
        <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-purple-50 dark:hover:bg-gray-700 hover:text-purple-600 dark:hover:text-purple-400 rounded-md transition-colors duration-200 flex items-center space-x-2">
          <svg class="w-5 h-5 text-purple-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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
          <span>Nearby Profiles</span>
        </a>
        <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-purple-50 dark:hover:bg-gray-700 hover:text-purple-600 dark:hover:text-purple-400 rounded-md transition-colors duration-200 flex items-center space-x-2">
          <svg class="w-5 h-5 text-purple-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="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
          <span>Instant Matches</span>
        </a>
        <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-purple-50 dark:hover:bg-gray-700 hover:text-purple-600 dark:hover:text-purple-400 rounded-md transition-colors duration-200 flex items-center space-x-2">
          <svg class="w-5 h-5 text-purple-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.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
          <span>Who Likes You</span>
        </a>
      </div>
      <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200 font-medium py-2 px-3 rounded-md hover:bg-purple-50 dark:hover:bg-gray-800">Messages</a>
      <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200 font-medium py-2 px-3 rounded-md hover:bg-purple-50 dark:hover:bg-gray-800">Events</a>
      <a href="#" class="block text-purple-600 dark:text-purple-400 border border-purple-600 dark:border-purple-400 hover:bg-purple-600 hover:text-white dark:hover:bg-purple-400 dark:hover:text-gray-900 font-medium py-2 px-4 rounded-full text-center transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 mt-2 block">Go Premium</a>
    </div>
  </div>
</nav>

<style>
  /* Custom animations for microinteractions */
  @keyframes bounce-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
  .group-hover\:animate-bounce-y:hover {
    animation: bounce-y 0.6s ease-in-out;
  }

  /* Tailwind's animate-pulse is good for pulse */

  /* Dark mode setup (assuming dark class is on body or html) */
  /* This CSS is typically handled by Tailwind's dark: prefix automatically, 
     but is included for clarity on how it would map if custom animations 
     needed dark mode specific styles */
</style>

<script>
  // Simple JavaScript to toggle mobile menu visibility and submenu
  document.addEventListener('DOMContentLoaded', () => {
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
    const mobileDiscoverButton = document.getElementById('mobile-discover-button');
    const mobileDiscoverSubmenu = document.getElementById('mobile-discover-submenu');

    mobileMenuButton.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
      // Rotate icon for mobile menu button
      const svg = mobileMenuButton.querySelector('svg');
      if (mobileMenu.classList.contains('hidden')) {
        svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>';
      } else {
        svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>';
      }
    });

    mobileDiscoverButton.addEventListener('click', () => {
      mobileDiscoverSubmenu.classList.toggle('hidden');
      // Rotate icon for mobile discover button
      mobileDiscoverButton.querySelector('svg').classList.toggle('rotate-180');
    });

    // Close mobile menu when switching to desktop view
    window.addEventListener('resize', () => {
      if (window.innerWidth >= 1024) { // Equivalent to Tailwind's lg breakpoint
        mobileMenu.classList.add('hidden');
        mobileMenuButton.querySelector('svg').innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>';
      }
    });
  });
</script>

ArtDécoFotografiaMegaMenu

Un componente di mega menu semplice e reattivo progettato in stile Art Déco con toni gioiello, adatto per portfolio fotografici. Include il supporto per la modalità oscura.

Aperto Anteprima

                <nav class="bg-emerald-800 dark:bg-gray-900 shadow-lg font-serif">
  <div class="container mx-auto px-4 py-2 flex justify-between items-center">
    <a href="#" class="text-ruby-300 dark:text-emerald-300 text-2xl font-bold tracking-wider uppercase transform skew-x-[-10deg]">
      <span class="block -skew-x-[10deg]">Reflections</span>
    </a>
    
    <!-- Mobile Menu Button -->
    <button id="menu-button" class="md:hidden text-emerald-100 dark:text-emerald-100 focus:outline-none">
      <svg class="w-8 h-8" 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>

    <!-- Mega Menu - Desktop and Hidden Mobile -->
    <div id="mega-menu" class="hidden md:flex flex-col md:flex-row md:space-x-8 mt-4 md:mt-0">
      <div class="relative group">
        <button class="peer py-2 px-3 text-emerald-100 dark:text-emerald-100 hover:text-white dark:hover:text-white transition duration-300 focus:outline-none text-lg tracking-wide">Galleries</button>
        <div class="absolute hidden peer-hover:block hover:block w-48 md:w-96 lg:w-3/4 max-w-lg bg-emerald-700 dark:bg-gray-800 shadow-xl transition-all duration-300 ease-in-out transform scale-y-0 origin-top group-hover:scale-y-100 rounded-md py-4 mt-2 z-10">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 px-4">
            <div>
              <h3 class="text-sapphire-300 dark:text-sapphire-300 text-sm uppercase mb-2">Collections</h3>
              <a href="#" class="block px-3 py-1 text-emerald-100 dark:text-emerald-100 hover:bg-emerald-600 dark:hover:bg-gray-700 rounded-sm text-base">Portraits</a>
              <a href="#" class="block px-3 py-1 text-emerald-100 dark:text-emerald-100 hover:bg-emerald-600 dark:hover:bg-gray-700 rounded-sm text-base">Landscapes</a>
              <a href="#" class="block px-3 py-1 text-emerald-100 dark:text-emerald-100 hover:bg-emerald-600 dark:hover:bg-gray-700 rounded-sm text-base">Abstract</a>
              <a href="#" class="block px-3 py-1 text-emerald-100 dark:text-emerald-100 hover:bg-emerald-600 dark:hover:bg-gray-700 rounded-sm text-base">Candid</a>
            </div>
            <div>
              <h3 class="text-sapphire-300 dark:text-sapphire-300 text-sm uppercase mb-2">Featured Work</h3>
              <div class="mb-2"><img src="https://picsum.photos/150/100?random=1" alt="Featured Image 1" class="w-full h-auto rounded-sm"></div>
              <div class="mb-2"><img src="https://picsum.photos/150/100?random=2" alt="Featured Image 2" class="w-full h-auto rounded-sm"></div>
            </div>
          </div>
        </div>
      </div>

      <a href="#" class="py-2 px-3 text-emerald-100 dark:text-emerald-100 hover:text-white dark:hover:text-white transition duration-300 text-lg tracking-wide">Services</a>
      <a href="#" class="py-2 px-3 text-emerald-100 dark:text-emerald-100 hover:text-white dark:hover:text-white transition duration-300 text-lg tracking-wide">About</a>
      <a href="#" class="py-2 px-3 text-emerald-100 dark:text-emerald-100 hover:text-white dark:hover:text-white transition duration-300 text-lg tracking-wide">Contact</a>
    </div>
  </div>
</nav>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const menuButton = document.getElementById('menu-button');
    const megaMenu = document.getElementById('mega-menu');

    menuButton.addEventListener('click', function() {
      megaMenu.classList.toggle('hidden');
      megaMenu.classList.toggle('flex');
      megaMenu.classList.toggle('flex-col');
    });
  });
</script>

Brutalist_Triadic_Simple_Mega_Menu

Un semplice mega menu in stile brutalista progettato per un blog o un sito di contenuti, caratterizzato da una combinazione di colori triadica e piena reattività con supporto per la modalità oscura.

Aperto Anteprima

                <nav class="bg-violet-500 dark:bg-violet-900 text-yellow-300 dark:text-cyan-300 border-b-8 border-yellow-300 dark:border-cyan-300 relative z-50">
  <div class="container mx-auto px-4 py-4 flex flex-col md:flex-row items-center justify-between">
    <div class="flex justify-between items-center w-full md:w-auto">
      <a href="#" class="text-4xl md:text-5xl font-extrabold tracking-tighter uppercase leading-none border-4 border-yellow-300 dark:border-cyan-300 px-3 py-1 bg-yellow-300 bg-opacity-20 dark:bg-cyan-300 dark:bg-opacity-20 text-yellow-300 dark:text-cyan-300">
        BLOG CO.
      </a>
      <button id="menu-toggle" class="md:hidden focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-cyan-300 p-2">
        <svg class="w-8 h-8 text-yellow-300 dark:text-cyan-300" 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="3" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>

    <div id="mega-menu-content" class="hidden md:flex flex-col md:flex-row md:items-center w-full md:w-auto mt-4 md:mt-0 space-y-4 md:space-y-0 md:space-x-8 lg:space-x-12 absolute md:static top-full left-0 right-0 bg-violet-600 dark:bg-violet-800 border-t-8 border-yellow-300 dark:border-cyan-300 md:border-none p-4 md:p-0">
      <a href="#" class="block text-2xl font-bold uppercase hover:text-white dark:hover:text-white transition duration-200 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-cyan-300 p-2 md:p-0">
        Articles
      </a>
      <a href="#" class="block text-2xl font-bold uppercase hover:text-white dark:hover:text-white transition duration-200 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-cyan-300 p-2 md:p-0">
        Categories
      </a>
      <a href="#" class="block text-2xl font-bold uppercase hover:text-white dark:hover:text-white transition duration-200 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-cyan-300 p-2 md:p-0">
        About
      </a>
      <a href="#" class="block text-2xl font-bold uppercase hover:text-white dark:hover:text-white transition duration-200 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-cyan-300 p-2 md:p-0">
        Contact
      </a>
    </div>
  </div>
</nav>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.getElementById('menu-toggle');
    const megaMenuContent = document.getElementById('mega-menu-content');

    menuToggle.addEventListener('click', function() {
      megaMenuContent.classList.toggle('hidden');
      megaMenuContent.classList.toggle('flex');
    });
  });
</script>

Componente Mega Menu - Social Media

Un componente mega menu reattivo e abilitato alla modalità scura progettato per applicazioni di social media, che segue un'estetica di Material Design con una combinazione di colori in scala di grigi. Include sezioni per tendenze, categorie e profili.

Aperto Anteprima

                <nav x-data="{ open: false, categoryOpen: false, resourcesOpen: false }" class="bg-white shadow-md dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">SocialFeed</a>
        </div>
        <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
          <a href="#" class="border-gray-500 text-gray-900 dark:text-white dark:border-white inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
          <div class="relative" x-data="{ openCategory: false }" @click.away="openCategory = false">
            <button @click="openCategory = !openCategory" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:text-gray-700 dark:focus:text-gray-200 focus:border-gray-300 dark:focus:border-gray-500 transition duration-150 ease-in-out">
              Categories
              <svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
              </svg>
            </button>
            <div x-show="openCategory" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-50 mt-2 w-full max-w-sm sm:max-w-md lg:max-w-3xl left-1/2 -ml-32 sm:-ml-48 lg:-ml-64 px-2 sm:px-0 lg:px-8">
              <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
                <div class="relative grid gap-6 bg-white dark:bg-gray-800 px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-3">
                  <div>
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Trending Categories</p>
                    <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
                      <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 sm:h-12 sm:w-12">
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m-4 8h4M21 8h-4m4 8h-4M10 4h4v16h-4V4z" /></svg>
                      </div>
                      <div class="ml-4">
                        <p class="text-base font-medium text-gray-900 dark:text-white">Technology</p>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Latest gadgets and tech news.</p>
                      </div>
                    </a>
                    <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
                      <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 sm:h-12 sm:w-12">
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7zm0 0V5c0-1.1.9-2 2-2h2M4 7h4m-4 8v2c0 1.1.9 2 2 2h2m-4-2H4m16-12v2c0 1.1-.9 2-2 2h-2m4-2h-4m-4 0h-4m0 0V5c0 1.1-.9 2-2 2h-2" /></svg>
                      </div>
                      <div class="ml-4">
                        <p class="text-base font-medium text-gray-900 dark:text-white">Gaming</p>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">New releases and esports updates.</p>
                      </div>
                    </a>
                  </div>
                  <div>
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Explore By Interest</p>
                    <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
                      <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 sm:h-12 sm:w-12">
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
                      </div>
                      <div class="ml-4">
                        <p class="text-base font-medium text-gray-900 dark:text-white">Art & Culture</p>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Dive into the world of creativity.</p>
                      </div>
                    </a>
                    <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
                      <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 sm:h-12 sm:w-12">
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                      </div>
                      <div class="ml-4">
                        <p class="text-base font-medium text-gray-900 dark:text-white">Science</p>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Discover new breakthroughs.</p>
                      </div>
                    </a>
                  </div>
                  <div class="lg:col-span-1">
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Featured Communities</p>
                    <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
                      <img class="flex-shrink-0 h-10 w-10 rounded-full object-cover" src="https://picsum.photos/id/237/50/50" alt="Community Avatar">
                      <div class="ml-4">
                        <p class="text-base font-medium text-gray-900 dark:text-white">Photography Enthusiasts</p>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Share your best shots.</p>
                      </div>
                    </a>
                    <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
                      <img class="flex-shrink-0 h-10 w-10 rounded-full object-cover" src="https://picsum.photos/id/1025/50/50" alt="Community Avatar">
                      <div class="ml-4">
                        <p class="text-base font-medium text-gray-900 dark:text-white">Bookworms United</p>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Discuss your favorite books.</p>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <a href="#" class="border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Trending</a>
        </div>
      </div>
      <div class="hidden sm:ml-6 sm:flex sm:items-center">
        <button class="flex-shrink-0 bg-white dark:bg-gray-800 p-1 rounded-full text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-offset-gray-900 dark:focus:ring-gray-400">
          <span class="sr-only">View notifications</span>
          <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 stroke-linecap="round" stroke-linejoin="round" stroke-width="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>

        <!-- Profile dropdown -->
        <div class="ml-3 relative" x-data="{ openProfile: false }" @click.away="openProfile = false">
          <div>
            <button type="button" class="max-w-xs bg-white dark:bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-offset-gray-900 dark:focus:ring-gray-400" id="user-menu-button" aria-expanded="false" aria-haspopup="true" @click="openProfile = !openProfile">
              <span class="sr-only">Open user menu</span>
              <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="">
            </button>
          </div>
          <div x-show="openProfile" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
            <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-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</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-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</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-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
          </div>
        </div>
      </div>
      <div class="-mr-2 flex items-center sm:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-500 dark:focus:ring-gray-400" aria-controls="mobile-menu" aria-expanded="false" @click="open = !open">
          <span class="sr-only">Open main menu</span>
          <svg x-show="!open" 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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <svg x-show="open" 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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="sm:hidden" id="mobile-menu" x-show="open" x-transition:enter="duration-200 ease-out" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="duration-100 ease-in" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95">
    <div class="pt-2 pb-3 space-y-1">
      <a href="#" class="bg-gray-50 dark:bg-gray-700 border-gray-500 text-gray-700 dark:text-white block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
      <div x-data="{ subOpen: false }">
        <button @click="subOpen = !subOpen" class="flex items-center justify-between w-full pl-3 pr-4 py-2 text-left text-base font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-500 border-l-4 border-transparent focus:outline-none focus:text-gray-800 focus:bg-gray-100 focus:border-gray-400 dark:focus:text-gray-200 dark:focus:bg-gray-700 dark:focus:border-gray-500 transition duration-150 ease-in-out">
          <span>Categories</span>
          <svg class="h-5 w-5 transition-transform" :class="{'transform rotate-180': subOpen}" 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 x-show="subOpen" class="mt-2 space-y-1 pl-6 pr-3">
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Technology</a>
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Gaming</a>
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Art & Culture</a>
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Science</a>
        </div>
      </div>
      <a href="#" class="border-transparent text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-500 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Trending</a>
    </div>
    <div class="pt-4 pb-3 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center px-4">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium text-gray-800 dark:text-white">John Doe</div>
          <div class="text-sm font-medium text-gray-500 dark:text-gray-400">[email protected]</div>
        </div>
      </div>
      <div class="mt-3 space-y-1">
        <a href="#" class="block px-4 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Your Profile</a>
        <a href="#" class="block px-4 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Settings</a>
        <a href="#" class="block px-4 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Sign out</a>
      </div>
    </div>
  </div>
</nav>
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

Componente Mega Menu

Un mega menu reattivo complesso ispirato al 3D per una dashboard. Utilizza una combinazione di colori triadica, supporta la modalità oscura e presenta più sezioni interattive per la visualizzazione dei dati e i pannelli di controllo.

Aperto Anteprima

                <nav class="relative bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-700 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 shadow-xl z-50 font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <svg class="h-8 w-8 text-white dark:text-purple-400" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.79-7-4.34-7-8.93h2c0 3.86 3.14 7 7 7v2.93z" />
          </svg>
          <span class="text-white dark:text-purple-400 text-2xl font-bold ml-2">3D Dash</span>
        </div>
      </div>
      <div class="hidden md:ml-6 md:flex md:items-center">
        <div class="relative group">
          <button class="text-white dark:text-purple-400 hover:text-white dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:focus:ring-purple-400 transition-all duration-300 ease-in-out transform hover:scale-105">
            <span class="relative z-10">Dashboard</span>
          </button>
          <div class="absolute left-1/2 -translate-x-1/2 mt-3 p-6 w-screen max-w-4xl opacity-0 invisible group-hover:opacity-100 group-hover:visible translate-y-3 group-hover:translate-y-0 transition-all duration-300 ease-out transform pointer-events-none group-hover:pointer-events-auto bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-700 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 rounded-3xl shadow-2xl overflow-hidden pointer-events-auto ring-4 ring-indigo-300 dark:ring-gray-700 perspective-1000" style="transform-style: preserve-3d; backface-visibility: hidden;">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 relative z-10">
              <!-- Background 3D Elements -->
              <div class="absolute inset-0 z-0 opacity-20">
                  <div class="absolute w-40 h-40 bg-purple-400/30 dark:bg-pink-400/30 rounded-full blur-3xl -left-10 -top-10 animate-pulse-slow"></div>
                  <div class="absolute w-60 h-60 bg-pink-400/30 dark:bg-yellow-400/30 rounded-full blur-3xl -right-20 -bottom-20 animate-pulse-slow animation-delay-700"></div>
                  <div class="absolute w-50 h-50 bg-indigo-400/30 dark:bg-indigo-400/30 rounded-full blur-3xl left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 animate-pulse-slow animation-delay-1400"></div>
              </div>
              <!-- Section 1: Overview -->
              <div class="relative p-4 rounded-xl bg-white/10 dark:bg-gray-700/20 backdrop-filter backdrop-blur-sm shadow-xl transform transition-all duration-300 ease-in-out hover:scale-105 hover:rotate-z-1 hover:shadow-2xl" style="transform: translateZ(20px);">
                <h3 class="text-lg font-bold text-white mb-3 dark:text-purple-300">Overview</h3>
                <ul class="space-y-2">
                  <li><a href="#" class="text-white/80 dark:text-gray-300 hover:text-white dark:hover:text-purple-400 flex items-center"><svg class="h-5 w-5 mr-2 text-white/50 dark:text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg> Live Analytics</a></li>
                  <li><a href="#" class="text-white/80 dark:text-gray-300 hover:text-white dark:hover:text-purple-400 flex items-center"><svg class="h-5 w-5 mr-2 text-white/50 dark:text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14v6m-3-3h6m-9-11V6a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V7a2 2 0 00-2-2h-3a2 2 0 00-2-2z"></path></svg> Performance Metrics</a></li>
                  <li><a href="#" class="text-white/80 dark:text-gray-300 hover:text-white dark:hover:text-purple-400 flex items-center"><svg class="h-5 w-5 mr-2 text-white/50 dark:text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h.01M7 16h.01M13 16h.01M17 16h.01M7 21h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg> Activity Log</a></li>
                </ul>
              </div>

              <!-- Section 2: Data Visualization -->
              <div class="relative p-4 rounded-xl bg-white/10 dark:bg-gray-700/20 backdrop-filter backdrop-blur-sm shadow-xl transform transition-all duration-300 ease-in-out hover:scale-105 hover:rotate-z-1 hover:shadow-2xl" style="transform: translateZ(20px);">
                <h3 class="text-lg font-bold text-white mb-3 dark:text-pink-300">Reports & Gauges</h3>
                <ul class="space-y-2">
                  <li><a href="#" class="text-white/80 dark:text-gray-300 hover:text-white dark:hover:text-pink-400 flex items-center"><svg class="h-5 w-5 mr-2 text-white/50 dark:text-pink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l2 2 4-4M16 12h2m-6 3h6m-12 5h.01M12 12v.01M10 20h4a2 2 0 002-2V6a2 2 0 00-2-2H8a2 2 0 00-2 2v12a2 2 0 002 2zm12-7L4 4"></path></svg> Custom Reports</a></li>
                  <li><a href="#" class="text-white/80 dark:text-gray-300 hover:text-white dark:hover:text-pink-400 flex items-center"><svg class="h-5 w-5 mr-2 text-white/50 dark:text-pink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7"></path></svg> Trend Analysis</a></li>
                  <li><a href="#" class="text-white/80 dark:text-gray-300 hover:text-white dark:hover:text-pink-400 flex items-center"><svg class="h-5 w-5 mr-2 text-white/50 dark:text-pink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h-6m6 4h-6m6 4h-6m4 0a3 3 0 11-6 0 3 3 0 016 0zM19 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg> Real-time Gauges</a></li>
                </ul>
              </div>

              <!-- Section 3: Quick Actions / Cards -->
              <div class="relative p-4 rounded-xl bg-white/10 dark:bg-gray-700/20 backdrop-filter backdrop-blur-sm shadow-xl transform transition-all duration-300 ease-in-out hover:scale-105 hover:rotate-z-1 hover:shadow-2xl" style="transform: translateZ(20px);">
                <h3 class="text-lg font-bold text-white mb-3 dark:text-yellow-300">Quick Actions</h3>
                <div class="space-y-3">
                  <a href="#" class="block p-3 rounded-lg bg-indigo-600/50 dark:bg-gray-600/50 hover:bg-indigo-700/70 dark:hover:bg-gray-500/70 transition-all duration-200 shadow-md text-white text-sm font-semibold flex items-center transform hover:scale-105">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
                    Add New Data Entry
                  </a>
                  <a href="#" class="block p-3 rounded-lg bg-pink-600/50 dark:bg-gray-600/50 hover:bg-pink-700/70 dark:hover:bg-gray-500/70 transition-all duration-200 shadow-md text-white text-sm font-semibold flex items-center transform hover:scale-105">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                    View All Records
                  </a>
                  <a href="#" class="block p-3 rounded-lg bg-yellow-600/50 dark:bg-gray-600/50 hover:bg-yellow-700/70 dark:hover:bg-gray-500/70 transition-all duration-200 shadow-md text-white text-sm font-semibold flex items-center transform hover:scale-105">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.515-1.077 1.485-1.077 2.001 0a2 2 0 011.879 1.442 2 2 0 001.972 1.879 2 2 0 011.442 1.879c1.077.515 1.077 1.485 0 2.001a2 2 0 01-1.442 1.879 2 2 0 00-1.972 1.879 2 2 0 01-1.879 1.442c-1.077.515-1.077 1.485 0 2.001a2 2 0 011.442 1.879 2 2 0 001.972 1.879 2 2 0 011.879 1.442c1.077.515 1.077 1.485 0 2.001a2 2 0 01-1.442 1.879 2 2 0 00-1.972 1.879 2 2 0 01-1.879 1.442c-1.077.515-1.077 1.485 0 2.001a2 2 0 01-1.442 1.879 2 2 0 00-1.972 1.879 2 2 0 01-1.879 1.442c-1.077-.515-1.077-1.485 0-2.001a2 2 0 011.442-1.879 2 2 0 001.972-1.879 2 2 0 011.879-1.442c1.077-.515 1.077-1.485 0-2.001a2 2 0 01-1.442-1.879 2 2 0 00-1.972-1.879 2 2 0 01-1.879-1.442c-1.077-.515-1.077-1.485 0-2.001a2 2 0 011.442-1.879 2 2 0 001.972-1.879 2 2 0 011.879-1.442z"></path></svg>
                    Configure Settings
                  </a>
                </div>
              </div>
            </div>
            <!-- 3D Card at the bottom -->
             <div class="relative mt-8 p-4 rounded-xl bg-gradient-to-r from-blue-400 to-indigo-500 dark:from-green-600 dark:to-teal-700 backdrop-filter backdrop-blur-sm shadow-2xl overflow-hidden transform transition-all duration-500 ease-in-out hover:scale-[1.02] hover:rotate-x-2 hover:rotate-y-2 hover:shadow-3xl" style="transform: translateZ(50px);">
                <div class="absolute inset-0 opacity-20">
                  <img src="https://picsum.photos/800/200?random=1" alt="Background pattern" class="w-full h-full object-cover" style="filter: brightness(0.4);"/>
                </div>
                <div class="relative z-10 flex items-center justify-between">
                  <div>
                    <h4 class="text-2xl font-extrabold text-white mb-1">Need Assistance?</h4>
                    <p class="text-sm text-blue-100 dark:text-green-100">Our support team is here to help you.</p>
                  </div>
                  <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-indigo-700 bg-white hover:bg-gray-100 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800 transition-colors duration-200 transform hover:scale-105">
                    Contact Support
                    <svg class="ml-2 -mr-1 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                  </a>
                </div>
            </div>
          </div>
        </div>
      </div>
      <div class="-mr-2 flex items-center md:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-purple-200 dark:text-purple-400 hover:text-white hover:bg-purple-500 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:focus:ring-purple-400 transform transition-all duration-300 ease-in-out" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <!-- Heroicon name: outline/menu -->
          <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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <!-- Icon when menu is open. -->
          <!-- Heroicon name: outline/x -->
          <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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden absolute inset-x-0 top-16 bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-700 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 pb-3 space-y-1 sm:px-3" id="mobile-menu">
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-purple-400 hover:bg-purple-700 dark:hover:bg-gray-700 hover:text-white dark:hover:text-white transition-colors duration-200">Dashboard Overview</a>
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-purple-400 hover:bg-purple-700 dark:hover:bg-gray-700 hover:text-white dark:hover:text-white transition-colors duration-200">Analytics</a>
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-purple-400 hover:bg-purple-700 dark:hover:bg-gray-700 hover:text-white dark:hover:text-white transition-colors duration-200">Reports</a>
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-purple-400 hover:bg-purple-700 dark:hover:bg-gray-700 hover:text-white dark:hover:text-white transition-colors duration-200">Settings</a>
  </div>
</nav>

<style>
  /* Adding custom styles for 3D rotation effects */
  @keyframes pulse-slow {
    0%, 100% { transform: scale(1); opacity: 0.2; }
    50% { transform: scale(1.1); opacity: 0.4; }
  }

  .animate-pulse-slow {
    animation: pulse-slow 3s infinite ease-in-out;
  }

  .animation-delay-700 {
    animation-delay: 0.7s;
  }

  .animation-delay-1400 {
    animation-delay: 1.4s;
  }

  .perspective-1000 {
    perspective: 1000px; /* Defines the 3D viewing perspective */
  }

  .rotate-x-2:hover { transform: rotateX(2deg); }
  .rotate-y-2:hover { transform: rotateY(2deg); }
  .rotate-z-1:hover { transform: rotateZ(1deg); }
  .shadow-3xl { 
      box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.4), 
                  0 30px 60px -30px rgba(0, 0, 0, 0.5), 
                  inset 0 -2px 6px 0 rgba(0, 0, 0, 0.3); 
  }
  /* Further refined styles for 3D interactions */
  .group:hover .group-hover\:translate-y-0 {
    transform: translateY(0) !important;
  }
  .group:hover .group-hover\:visible {
    visibility: visible !important;
  }
  .group:hover .group-hover\:opacity-100 {
    opacity: 1 !important;
  }
  .group:hover .group-hover\:pointer-events-auto {
    pointer-events: auto !important;
  }

  /* Ensure mobile menu can be toggled by JS. Tailwind doesn't handle interactive parts without JS. */
  /* For a pure HTML/CSS demo, the mobile menu would typically be activated by a :checked pseudo-class on a hidden checkbox, 
     but that's not standard for a mega menu and would be less semantic than a button with JS. 
     The provided HTML assumes a simple JS toggle for the 'hidden' class on the mobile-menu div and block/hidden on the SVG icons. */

</style>

Glassmorphism_Pastel_Mega_Menu

Un componente di mega menu semplice e reattivo con un design glassmorphism, una combinazione di colori pastello e il supporto della modalità scura, adatto per la navigazione del cruscotto. Presenta elementi smerigliati e traslucidi con effetti di sfocatura.

Aperto Anteprima

                <nav class="bg-gradient-to-br from-purple-100/60 to-blue-100/60 backdrop-blur-lg dark:from-purple-900/60 dark:to-blue-900/60 dark:text-gray-100 p-4 transition-colors duration-300">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-lg font-semibold text-purple-800 dark:text-purple-200 transition-colors duration-300">Dashboard</div>

    <!-- Mobile Menu Button -->
    <button id="menu-button" class="md:hidden focus:outline-none dark:text-gray-200" aria-label="Toggle menu">
      <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>

    <!-- Mega Menu Content -->
    <div id="mega-menu" class="hidden md:flex md:items-center md:space-x-8 absolute md:relative top-full left-0 w-full md:w-auto mt-2 md:mt-0 p-4 md:p-0
                            bg-gradient-to-br from-purple-50/70 to-blue-50/70 backdrop-blur-lg dark:from-purple-950/70 dark:to-blue-950/70
                            shadow-lg md:shadow-none rounded-lg md:rounded-none transition-all duration-300 ease-in-out transform md:transform-none
                            opacity-0 md:opacity-100 scale-95 md:scale-100 origin-top md:origin-center">
      <div class="flex flex-col md:flex-row md:space-x-8 space-y-4 md:space-y-0 w-full">

        <!-- Section 1: Overview -->
        <div class="flex-1">
          <h3 class="font-bold text-purple-700 dark:text-purple-300 mb-2 border-b border-purple-200 dark:border-purple-800 pb-1">Overview</h3>
          <ul class="space-y-1">
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Analytics</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Reports</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Summary</a></li>
          </ul>
        </div>

        <!-- Section 2: Management -->
        <div class="flex-1">
          <h3 class="font-bold text-purple-700 dark:text-purple-300 mb-2 border-b border-purple-200 dark:border-purple-800 pb-1">Management</h3>
          <ul class="space-y-1">
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Users</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Settings</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Integrations</a></li>
          </ul>
        </div>

        <!-- Section 3: Quick Links -->
        <div class="flex-1">
          <h3 class="font-bold text-purple-700 dark:text-purple-300 mb-2 border-b border-purple-200 dark:border-purple-800 pb-1">Quick Links</h3>
          <ul class="space-y-1">
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Help Center</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Feedback</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Contact Support</a></li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</nav>

<!-- Script for mobile menu toggle (pure CSS solution is complex for mega menus without JS) -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const menuButton = document.getElementById('menu-button');
    const megaMenu = document.getElementById('mega-menu');

    menuButton.addEventListener('click', () => {
      const isHidden = megaMenu.classList.contains('hidden');
      if (isHidden) {
        megaMenu.classList.remove('hidden', 'opacity-0', 'scale-95');
        megaMenu.classList.add('flex', 'opacity-100', 'scale-100');
      } else {
        megaMenu.classList.add('opacity-0', 'scale-95');
        megaMenu.classList.remove('opacity-100', 'scale-100', 'flex');
        // Using a timeout to ensure transition plays before hiding completely
        setTimeout(() => {
          megaMenu.classList.add('hidden');
        }, 300); // Should match the transition duration
      }
    });
  });
</script>

Componente Mega Menu

Design minimalista/piatto - Mega menu per l'e-commerce vivace e semplice con supporto per la modalità scura

Aperto Anteprima

                <nav class="bg-white dark:bg-gray-900 shadow-md">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <div class="text-2xl font-bold text-gray-800 dark:text-white">ShopSwift</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition duration-300">Home</a>
      <div class="relative group">
        <button class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition duration-300">Categories</button>
        <div class="absolute left-0 mt-3 w-56 bg-white dark:bg-gray-800 shadow-lg rounded-md opacity-0 group-hover:opacity-100 group-hover:scale-100 transition-all duration-300 origin-top transform scale-95">
          <div class="p-4">
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">Electronics</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">Apparel</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">Home Goods</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">Books</a>
          </div>
        </div>
      </div>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition duration-300">Deals</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition duration-300">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 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>
</nav>

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.

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