Search Components

Mega Menu

Large dropdown panel displaying multiple navigation options

Mega Menu Component - Paper/Print Retro Crypto

A simple, responsive mega menu component with a paper/print-inspired design and a retro/vintage color palette, suitable for cryptocurrency and blockchain applications. Includes dark mode support.

Open Preview

                <nav class="bg-amber-50 dark:bg-zinc-800 font-serif shadow-md dark:shadow-lg transition-colors duration-300">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <a href="#" class="text-stone-800 dark:text-stone-200 text-2xl font-bold tracking-wider uppercase flex items-center">
      <svg class="w-6 h-6 mr-2 text-yellow-600 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
      CryptoInk
    </a>

    <!-- Mobile Menu Button -->
    <div class="lg:hidden">
      <button id="mobile-menu-button" class="text-stone-700 dark:text-stone-300 focus:outline-none focus:ring-2 focus:ring-yellow-600 rounded-md p-2">
        <svg class="w-7 h-7" 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 & Mobile Menu Content -->
    <div id="mega-menu-content" class="hidden lg:flex lg:items-center lg:space-x-8 absolute lg:static top-full left-0 w-full lg:w-auto bg-amber-50 dark:bg-zinc-800 lg:bg-transparent lg:dark:bg-transparent shadow-lg lg:shadow-none transition-all duration-300 ease-out z-50 transform -translate-y-full lg:translate-y-0 text-center lg:text-left py-4 lg:py-0 border-t lg:border-t-0 border-stone-200 dark:border-zinc-700">
      <ul class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-6 w-full">
        <li>
          <a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-yellow-600 dark:hover:text-yellow-400 py-2 border-b-2 border-transparent hover:border-yellow-600 dark:hover:border-yellow-400 transition-colors duration-200 text-lg">
            Dashboard
          </a>
        </li>
        <li class="relative group">
          <a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-yellow-600 dark:hover:text-yellow-400 py-2 border-b-2 border-transparent group-hover:border-yellow-600 dark:group-hover:border-yellow-400 transition-colors duration-200 text-lg flex items-center justify-center lg:justify-start">
            Assets
            <svg class="ml-1 w-4 h-4 hidden lg:block" 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>
          </a>
          <div class="lg:absolute lg:left-1/2 lg:transform lg:-translate-x-1/2 lg:mt-4 lg:w-64 lg:p-6 bg-amber-100 dark:bg-zinc-700 rounded-lg shadow-xl dark:shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 scale-95 group-hover:scale-100 origin-top text-left border border-amber-200 dark:border-zinc-600">
            <div class="grid gap-4">
              <a href="#" class="block text-stone-800 dark:text-stone-200 hover:text-yellow-700 dark:hover:text-yellow-300 text-md font-medium">
                <p class="mb-1">My Portfolio</p>
                <p class="text-xs text-stone-600 dark:text-stone-400">View your crypto holdings.</p>
              </a>
              <a href="#" class="block text-stone-800 dark:text-stone-200 hover:text-yellow-700 dark:hover:text-yellow-300 text-md font-medium">
                <p class="mb-1">Transactions</p>
                <p class="text-xs text-stone-600 dark:text-stone-400">Track your past trades.</p>
              </a>
              <a href="#" class="block text-stone-800 dark:text-stone-200 hover:text-yellow-700 dark:hover:text-yellow-300 text-md font-medium">
                <p class="mb-1">Deposits/Withdrawals</p>
                <p class="text-xs text-stone-600 dark:text-stone-400">Manage funds.</p>
              </a>
            </div>
          </div>
        </li>
        <li>
          <a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-yellow-600 dark:hover:text-yellow-400 py-2 border-b-2 border-transparent hover:border-yellow-600 dark:hover:border-yellow-400 transition-colors duration-200 text-lg">
            Trade
          </a>
        </li>
        <li>
          <a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-yellow-600 dark:hover:text-yellow-400 py-2 border-b-2 border-transparent hover:border-yellow-600 dark:hover:border-yellow-400 transition-colors duration-200 text-lg">
            News
          </a>
        </li>
        <li>
          <a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-yellow-600 dark:hover:text-yellow-400 py-2 border-b-2 border-transparent hover:border-yellow-600 dark:hover:border-yellow-400 transition-colors duration-200 text-lg">
            Support
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- Simple JavaScript for mobile menu toggle (outside of the required HTML part, for functional demo) -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('mobile-menu-button');
    const menu = document.getElementById('mega-menu-content');

    button.addEventListener('click', function() {
      menu.classList.toggle('hidden');
      menu.classList.toggle('translate-y-full'); // For initial offscreen position
      menu.classList.toggle('-translate-y-full'); // For initial offscreen position
      menu.classList.toggle('translate-y-0'); // For onscreen position
    });

    // Close menu when clicking outside on mobile
    document.addEventListener('click', function(event) {
      if (!menu.classList.contains('hidden') && !button.contains(event.target) && !menu.contains(event.target)) {
        menu.classList.add('hidden');
        menu.classList.add('-translate-y-full');
        menu.classList.remove('translate-y-0');
      }
    });

    // Close the menu when a link inside it is clicked on mobile
    menu.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', () => {
        if (!menu.classList.contains('hidden') && window.innerWidth < 1024) { // 1024px is Tailwind's 'lg' breakpoint
          menu.classList.add('hidden');
          menu.classList.add('-translate-y-full');
          menu.classList.remove('translate-y-0');
        }
      });
    });

    // Handle window resize to reset menu state for desktop
    window.addEventListener('resize', () => {
      if (window.innerWidth >= 1024) {
        menu.classList.remove('hidden', '-translate-y-full', 'translate-y-0');
      } else {
        menu.classList.add('hidden', '-translate-y-full');
        menu.classList.remove('translate-y-0');
      }
    });
  });
</script>

Mega Menu Component - Dark Mode UI (Finance/Banking)

A simple, responsive mega menu component designed for finance/banking interfaces, featuring a dark mode UI with cool neutrals. Includes prominent sections for popular links, account services, and quick access.

Open Preview

                <nav class="bg-gray-900 text-gray-200 p-4 dark:bg-gray-950 dark:text-gray-100 relative">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-xl font-bold text-blue-400 hover:text-blue-300 transition-colors duration-300">FinSecure Bank</a>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="hover:text-blue-400 transition-colors duration-300">Personal</a>
      <a href="#" class="hover:text-blue-400 transition-colors duration-300">Business</a>
      <div class="group relative">
        <button class="flex items-center hover:text-blue-400 transition-colors duration-300 focus:outline-none">Services <svg class="w-4 h-4 ml-1 transform group-hover:rotate-180 transition-transform duration-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="2" d="M19 9l-7 7-7-7"></path></svg></button>
        <div class="absolute hidden group-hover:block w-full left-1/2 -ml-[calc(50vw-50%)] xl:left-0 xl:ml-0 xl:w-screen xl:max-w-7xl pt-4 z-50">
          <div class="bg-gray-800 dark:bg-gray-900 rounded-lg shadow-xl p-8 grid grid-cols-1 md:grid-cols-3 gap-8 ring-1 ring-gray-700 dark:ring-gray-800">
            <div>
              <h3 class="font-semibold text-lg text-blue-400 mb-4">Popular Links</h3>
              <ul class="space-y-2 text-sm">
                <li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Online Banking Login</a></li>
                <li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Mortgage Rates</a></li>
                <li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Credit Card Offers</a></li>
                <li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Investment Portfolios</a></li>
                <li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">ATM Locator</a></li>
              </ul>
            </div>
            <div>
              <h3 class="font-semibold text-lg text-blue-400 mb-4">Account Services</h3>
              <ul class="space-y-2 text-sm">
                <li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Open New Account</a></li>
                <li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Apply for Loan</a></li>
                <li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Bill Pay & Transfers</a></li>
                <li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Statements & Documents</a></li>
                <li><a href="#" class="hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200">Fraud Protection</a></li>
              </ul>
            </div>
            <div>
              <h3 class="font-semibold text-lg text-blue-400 mb-4">Quick Access</h3>
              <img src="https://picsum.photos/300/200?random=1" alt="Banking illustration" class="rounded-lg mb-4 shadow-md" loading="lazy">
              <p class="text-sm text-gray-400 dark:text-gray-400 mb-2">Need assistance or have a question? Contact our 24/7 support team.</p>
              <a href="#" class="inline-flex items-center text-blue-400 hover:text-blue-300 dark:hover:text-blue-400 transition-colors duration-200 text-sm font-medium">
                Get Support
                <svg class="w-4 h-4 ml-1" 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="M9 5l7 7-7 7"></path></svg>
              </a>
            </div>
          </div>
        </div>
      </div>
      <a href="#" class="hover:text-blue-400 transition-colors duration-300">About Us</a>
      <a href="#" class="hover:text-blue-400 transition-colors duration-300">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-gray-200 hover:text-blue-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>

Mega Menu Component - Neumorphic Vibrant E-commerce

A complex, responsive mega menu component designed with a neumorphic, vibrant E-commerce style. Features multiple columns, image examples, and category listings, with full dark mode support.

Open Preview

                <nav class="relative bg-gradient-to-br from-purple-100 to-indigo-200 text-purple-900 shadow-xl dark:from-gray-800 dark:to-gray-900 dark:text-gray-100 lg:px-8 px-4 py-3 font-sans">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-2xl font-bold tracking-tight text-purple-800 dark:text-purple-300">VibrantShop</a>
    
    <!-- Desktop/Tablet Menu - Hidden on Mobile -->
    <div class="hidden lg:flex items-center space-x-6">
      <a href="#" class="block px-4 py-2 font-medium transition-all duration-300 rounded-xl hover:text-purple-600 hover:shadow-inner-neumorphic-sm hover:bg-purple-50 dark:hover:text-purple-200 dark:hover:bg-gray-700">Home</a>
      
      <div class="group relative">
        <button class="flex items-center px-4 py-2 font-medium transition-all duration-300 rounded-xl hover:text-purple-600 hover:shadow-inner-neumorphic-sm hover:bg-purple-50 dark:hover:text-purple-200 dark:hover:bg-gray-700 focus:outline-none">
          Categories
          <svg class="ml-2 w-4 h-4 transform group-hover:rotate-180 transition-transform duration-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="2" d="M19 9l-7 7-7-7"></path></svg>
        </button>
        
        <div class="absolute left-1/2 -translate-x-1/2 mt-5 w-screen max-w-5xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform scale-95 group-hover:scale-100 origin-top z-50 rounded-3xl p-6 shadow-neumorphic-xl bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-gray-800 dark:to-gray-900 border border-purple-200 dark:border-gray-700">
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- Column 1 -->
            <div>
              <p class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-3">Apparel</p>
              <ul class="space-y-2">
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Men's Clothing</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Women's Clothing</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Kids & Baby</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Shoes & Footwear</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Accessories</a></li>
              </ul>
            </div>

            <!-- Column 2 -->
            <div>
              <p class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-3">Electronics</p>
              <ul class="space-y-2">
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Smartphones</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Laptops & PCs</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Cameras & Drones</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Audio & Headphones</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Wearable Tech</a></li>
              </ul>
            </div>
            
            <!-- Column 3 -->
            <div>
              <p class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-3">Home & Living</p>
              <ul class="space-y-2">
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Kitchen Appliances</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Furniture</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Decor & Art</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Bedding & Bath</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Smart Home Devices</a></li>
              </ul>
            </div>

            <!-- Column 4 Images/Promo -->
            <div>
              <p class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-3">Featured Deals</p>
              <div class="space-y-4">
                <a href="#" class="block rounded-xl overflow-hidden shadow-neumorphic-md hover:shadow-neumorphic-lg transition-shadow duration-300 bg-purple-100 dark:bg-gray-700">
                  <img src="https://picsum.photos/id/1015/300/180" alt="Summer Collection" class="w-full h-auto object-cover">
                  <div class="p-3">
                    <p class="font-medium text-purple-800 dark:text-gray-100">Summer Vibes Sale</p>
                    <p class="text-sm text-purple-600 dark:text-gray-300">Up to 40% off selected items!</p>
                  </div>
                </a>
                <a href="#" class="block rounded-xl overflow-hidden shadow-neumorphic-md hover:shadow-neumorphic-lg transition-shadow duration-300 bg-purple-100 dark:bg-gray-700">
                  <img src="https://picsum.photos/id/20/300/180" alt="New Arrivals" class="w-full h-auto object-cover">
                  <div class="p-3">
                    <p class="font-medium text-purple-800 dark:text-gray-100">New Tech Arrivals</p>
                    <p class="text-sm text-purple-600 dark:text-gray-300">Explore the latest gadgets!</p>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <a href="#" class="block px-4 py-2 font-medium transition-all duration-300 rounded-xl hover:text-purple-600 hover:shadow-inner-neumorphic-sm hover:bg-purple-50 dark:hover:text-purple-200 dark:hover:bg-gray-700">Deals</a>
      <a href="#" class="block px-4 py-2 font-medium transition-all duration-300 rounded-xl hover:text-purple-600 hover:shadow-inner-neumorphic-sm hover:bg-purple-50 dark:hover:text-purple-200 dark:hover:bg-gray-700">About Us</a>
      <a href="#" class="block px-4 py-2 font-medium transition-all duration-300 rounded-xl hover:text-purple-600 hover:shadow-inner-neumorphic-sm hover:bg-purple-50 dark:hover:text-purple-200 dark:hover:bg-gray-700">Contact</a>
    </div>

    <!-- User Actions & Cart for Desktop/Tablet -->
    <div class="hidden lg:flex items-center space-x-4">
      <button class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
        <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.182 1.769.707 1.769H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 0a2 2 0 100 4 2 2 0 000-4z"></path></svg>
      </button>
      <button class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
        <img class="w-6 h-6 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
      </button>
      <!-- Dark Mode Toggle -->
      <button id="theme-toggle" class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
        <svg class="w-6 h-6 hidden dark:block" 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="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-7.775l.707-.707M6.707 17.293l-.707.707M18 12a6 6 0 11-12 0 6 6 0 0112 0z"></path></svg>
        <svg class="w-6 h-6 dark:hidden" 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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
      </button>
    </div>

    <!-- Mobile Menu Button - Hidden on Desktop/Tablet -->
    <div class="lg:hidden flex items-center space-x-4">
      <button class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
        <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.182 1.769.707 1.769H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 0a2 2 0 100 4 2 2 0 000-4z"></path></svg>
      </button>
      <button id="mobile-menu-button" class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800 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>

  <!-- Mobile Menu Content (Hidden by default) -->
  <div id="mobile-menu" class="lg:hidden hidden fixed inset-0 bg-gradient-to-br from-purple-100 to-indigo-200 dark:from-gray-800 dark:to-gray-900 z-50 overflow-y-auto transform transition-transform duration-300 ease-in-out -translate-x-full">
    <div class="flex justify-between items-center px-4 py-3 border-b border-purple-200 dark:border-gray-700 sticky top-0 bg-inherit">
      <h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300">Menu</h2>
      <button id="close-mobile-menu" class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800 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="M6 18L18 6M6 6l12 12"></path></svg>
      </button>
    </div>
    <div class="p-6 space-y-6">
      <a href="#" class="block px-4 py-3 text-lg font-medium text-purple-800 dark:text-gray-100 rounded-xl shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm bg-purple-50 dark:bg-gray-700 transition-all duration-200">Home</a>
      
      <div class="rounded-xl shadow-neumorphic-sm bg-purple-50 dark:bg-gray-700 p-4">
        <input type="checkbox" id="category-toggle-mobile" class="peer hidden" />
        <label for="category-toggle-mobile" class="flex justify-between items-center text-lg font-medium text-purple-800 dark:text-gray-100 cursor-pointer py-2">
          Categories
          <svg class="w-5 h-5 transition-transform duration-300 peer-checked:rotate-180" 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>
        </label>
        <div class="max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-screen">
          <div class="pt-4 space-y-4">
            <div>
              <p class="font-semibold text-purple-700 dark:text-purple-300 mb-2">Apparel</p>
              <ul class="space-y-1 text-sm pl-4">
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Men's Clothing</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Women's Clothing</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Kids & Baby</a></li>
              </ul>
            </div>
            <div>
              <p class="font-semibold text-purple-700 dark:text-purple-300 mb-2">Electronics</p>
              <ul class="space-y-1 text-sm pl-4">
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Smartphones</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Laptops & PCs</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Cameras & Drones</a></li>
              </ul>
            </div>
            <div>
              <p class="font-semibold text-purple-700 dark:text-purple-300 mb-2">Home & Living</p>
              <ul class="space-y-1 text-sm pl-4">
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Kitchen Appliances</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Furniture</a></li>
                <li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Decor & Art</a></li>
              </ul>
            </div>
            <div class="mt-4">
              <p class="font-semibold text-purple-700 dark:text-purple-300 mb-2">Featured Deals</p>
              <a href="#" class="block rounded-xl overflow-hidden shadow-neumorphic-md bg-purple-100 dark:bg-gray-800">
                <img src="https://picsum.photos/id/1015/300/180" alt="Summer Collection" class="w-full h-auto object-cover">
                <div class="p-3">
                  <p class="font-medium text-purple-800 dark:text-gray-100">Summer Vibes Sale</p>
                  <p class="text-sm text-purple-600 dark:text-gray-300">Up to 40% off!</p>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>

      <a href="#" class="block px-4 py-3 text-lg font-medium text-purple-800 dark:text-gray-100 rounded-xl shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm bg-purple-50 dark:bg-gray-700 transition-all duration-200">Deals</a>
      <a href="#" class="block px-4 py-3 text-lg font-medium text-purple-800 dark:text-gray-100 rounded-xl shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm bg-purple-50 dark:bg-gray-700 transition-all duration-200">About Us</a>
      <a href="#" class="block px-4 py-3 text-lg font-medium text-purple-800 dark:text-gray-100 rounded-xl shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm bg-purple-50 dark:bg-gray-700 transition-all duration-200">Contact</a>
      
      <!-- Mobile specific user actions -->
      <div class="pt-4 border-t border-purple-200 dark:border-gray-700 mt-6 flex justify-around">
          <button class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
            <img class="w-6 h-6 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
          </button>
          <!-- Dark Mode Toggle for Mobile -->
          <button id="theme-toggle-mobile" class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
            <svg class="w-6 h-6 hidden dark:block" 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="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-7.775l.707-.707M6.707 17.293l-.707.707M18 12a6 6 0 11-12 0 6 6 0 0112 0z"></path></svg>
            <svg class="w-6 h-6 dark:hidden" 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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
          </button>
      </div>
    </div>
  </div>
</nav>

<!-- Custom Styles for Neumorphic Shadows (add to your CSS or use a style tag for demonstration) -->
<style>
  /* Base Neumorphic Shadow */
  .shadow-neumorphic-sm {
    box-shadow: 4px 4px 8px rgba(162, 126, 250, 0.4), -4px -4px 8px rgba(255, 255, 255, 0.7);
  }
  .dark .shadow-neumorphic-sm {
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.6), -4px -4px 8px rgba(100, 100, 100, 0.3);
  }

  .shadow-neumorphic-md {
    box-shadow: 8px 8px 16px rgba(162, 126, 250, 0.4), -8px -8px 16px rgba(255, 255, 255, 0.7);
  }
  .dark .shadow-neumorphic-md {
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.6), -8px -8px 16px rgba(100, 100, 100, 0.3);
  }

  .shadow-neumorphic-lg {
    box-shadow: 12px 12px 24px rgba(162, 126, 250, 0.4), -12px -12px 24px rgba(255, 255, 255, 0.7);
  }
  .dark .shadow-neumorphic-lg {
    box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.6), -12px -12px 24px rgba(100, 100, 100, 0.3);
  }

  .shadow-neumorphic-xl {
    box-shadow: 20px 20px 40px rgba(162, 126, 250, 0.4), -20px -20px 40px rgba(255, 255, 255, 0.7);
  }
  .dark .shadow-neumorphic-xl {
    box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.6), -20px -20px 40px rgba(100, 100, 100, 0.3);
  }
  
  /* Inner Neumorphic Shadow */
  .shadow-inner-neumorphic-sm {
    box-shadow: inset 2px 2px 5px rgba(162, 126, 250, 0.5), inset -2px -2px 5px rgba(255, 255, 255, 0.7);
  }
  .dark .shadow-inner-neumorphic-sm {
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.6), inset -2px -2px 5px rgba(100, 100, 100, 0.3);
  }

  /* For the mobile menu to work without JS, we'd traditionally use JS. 
     However, for a pure HTML/CSS demo of toggleable content, 
     a hidden checkbox and label + peer selector could be used for the outer menu.
     For a true off-canvas menu, this implies JS. We'll simulate with an always-present 'fixed' element.
     The provided solution uses 'hidden' on mobile-menu and relies on external JS 
     (common for such complex interactions) for a realistic simulation.
     For a pure CSS *toggle*, a checkbox with label is used inside the mobile categories.
  */
</style>

<script>
  // Dark mode toggle functionality
  const setupDarkModeToggle = (toggleId) => {
    const themeToggle = document.getElementById(toggleId);
    if (themeToggle) {
      // Check local storage for theme preference or default to system preference
      if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }

      themeToggle.addEventListener('click', () => {
        if (document.documentElement.classList.contains('dark')) {
          document.documentElement.classList.remove('dark');
          localStorage.theme = 'light';
        } else {
          document.documentElement.classList.add('dark');
          localStorage.theme = 'dark';
        }
      });
    }
  };

  setupDarkModeToggle('theme-toggle'); // Desktop toggle
  setupDarkModeToggle('theme-toggle-mobile'); // Mobile toggle

  // Mobile menu toggle functionality
  const mobileMenuButton = document.getElementById('mobile-menu-button');
  const mobileMenu = document.getElementById('mobile-menu');
  const closeMobileMenuButton = document.getElementById('close-mobile-menu');

  if (mobileMenuButton && mobileMenu && closeMobileMenuButton) {
    mobileMenuButton.addEventListener('click', () => {
      mobileMenu.classList.remove('hidden');
      setTimeout(() => {
        mobileMenu.classList.remove('-translate-x-full');
        mobileMenu.classList.add('translate-x-0');
      }, 10);
    });

    closeMobileMenuButton.addEventListener('click', () => {
      mobileMenu.classList.remove('translate-x-0');
      mobileMenu.classList.add('-translate-x-full');
      setTimeout(() => {
        mobileMenu.classList.add('hidden');
      }, 300); // Match transition duration
    });

    // Close menu if clicked outside (optional, more complex)
    // document.addEventListener('click', (event) => {
    //   if (!mobileMenu.contains(event.target) && !mobileMenuButton.contains(event.target) && mobileMenu.classList.contains('translate-x-0')) {
    //     mobileMenu.classList.remove('translate-x-0');
    //     mobileMenu.classList.add('-translate-x-full');
    //     setTimeout(() => { mobileMenu.classList.add('hidden'); }, 300);
    //   }
    // });
  }
</script>

ArtDeco_SaaS_MegaMenu

A simple, responsive mega menu component designed with an Art Deco aesthetic, using a purple/violet color scheme, suitable for Technology/SaaS applications. Includes dark mode support.

Open Preview

                <nav class="bg-gradient-to-r from-purple-800 to-indigo-900 text-white dark:from-gray-900 dark:to-black font-serif shadow-lg">
  <div class="container mx-auto px-4 py-4 md:py-6 flex justify-between items-center">
    <a href="#" class="text-2xl font-bold tracking-wider uppercase text-purple-200 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 transition duration-300 ease-in-out transform hover:scale-105">
      SaaSymmetry
    </a>
    
    <!-- Mobile Menu Button -->
    <button class="md:hidden focus:outline-none" aria-label="Toggle menu">
      <svg class="w-8 h-8 text-purple-200 dark:text-purple-400" 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>

    <!-- Desktop Menu (visible on md and up) -->
    <div class="hidden md:flex space-x-8 lg:space-x-12">
      <div class="relative group">
        <button class="text-purple-200 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 transition duration-300 ease-in-out text-lg tracking-wide">Features</button>
        <div class="absolute hidden group-hover:block bg-gradient-to-br from-purple-900 to-indigo-900 dark:from-gray-800 dark:to-gray-950 shadow-xl rounded-lg mt-3 p-6 min-w-[200px] z-10 border border-purple-700 dark:border-gray-700">
          <a href="#" class="block text-purple-300 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 py-2 transition duration-200 ease-in-out text-base tracking-wide">Analytics</a>
          <a href="#" class="block text-purple-300 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 py-2 transition duration-200 ease-in-out text-base tracking-wide">Automation</a>
          <a href="#" class="block text-purple-300 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 py-2 transition duration-200 ease-in-out text-base tracking-wide">Integrations</a>
        </div>
      </div>
      
      <div class="relative group">
        <button class="text-purple-200 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 transition duration-300 ease-in-out text-lg tracking-wide">Solutions</button>
        <div class="absolute hidden group-hover:block bg-gradient-to-br from-purple-900 to-indigo-900 dark:from-gray-800 dark:to-gray-950 shadow-xl rounded-lg mt-3 p-6 min-w-[200px] z-10 border border-purple-700 dark:border-gray-700">
          <a href="#" class="block text-purple-300 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 py-2 transition duration-200 ease-in-out text-base tracking-wide">Enterprise</a>
          <a href="#" class="block text-purple-300 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 py-2 transition duration-200 ease-in-out text-base tracking-wide">Small Business</a>
        </div>
      </div>

      <a href="#" class="text-purple-200 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 transition duration-300 ease-in-out text-lg tracking-wide">Pricing</a>
      <a href="#" class="text-purple-200 dark:text-purple-400 hover:text-purple-100 dark:hover:text-purple-300 transition duration-300 ease-in-out text-lg tracking-wide">Contact</a>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default, can be toggled by JS) -->
  <!-- For a purely HTML/CSS solution, this would typically be hidden and revealed with a :checked pseudo-class on a hidden checkbox, 
       but that gets complex for nested menus without JS. This is illustrative for positioning. -->
  <div class="md:hidden hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 text-center">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-purple-100 dark:text-purple-300 hover:bg-purple-700 dark:hover:bg-gray-700 transition duration-200">Features</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-purple-100 dark:text-purple-300 hover:bg-purple-700 dark:hover:bg-gray-700 transition duration-200">Solutions</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-purple-100 dark:text-purple-300 hover:bg-purple-700 dark:hover:bg-gray-700 transition duration-200">Pricing</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-purple-100 dark:text-purple-300 hover:bg-purple-700 dark:hover:bg-gray-700 transition duration-200">Contact</a>
    </div>
  </div>
</nav>

Mega Menu Component - Neon Glow

A simple, responsive mega menu component with neon/glow effects, warm neutral colors, and dark mode support, suitable for booking/reservation systems.

Open Preview

                <nav class="bg-gradient-to-r from-stone-100 to-amber-50 dark:from-stone-900 dark:to-stone-800 p-4 shadow-sm font-sans relative">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-stone-800 dark:text-stone-100 text-2xl font-bold tracking-tight relative">
      GlowBook
      <span class="absolute inset-0 block rounded-full blur-sm opacity-50 bg-amber-300 dark:bg-amber-600 animate-pulse"></span>
    </a>
    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-stone-600 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 text-lg font-medium relative group transition duration-300">
        Book Now
        <span class="absolute inset-0 block rounded-full blur-sm opacity-0 group-hover:opacity-20 transition-opacity duration-300 bg-amber-300 dark:bg-amber-600"></span>
      </a>
      <a href="#" class="text-stone-600 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 text-lg font-medium relative group transition duration-300">
        Services
        <span class="absolute inset-0 block rounded-full blur-sm opacity-0 group-hover:opacity-20 transition-opacity duration-300 bg-amber-300 dark:bg-amber-600"></span>
      </a>
      <a href="#" class="text-stone-600 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 text-lg font-medium relative group transition duration-300">
        About Us
        <span class="absolute inset-0 block rounded-full blur-sm opacity-0 group-hover:opacity-20 transition-opacity duration-300 bg-amber-300 dark:bg-amber-600"></span>
      </a>
      <a href="#" class="text-stone-600 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 text-lg font-medium relative group transition duration-300">
        Contact
        <span class="absolute inset-0 block rounded-full blur-sm opacity-0 group-hover:opacity-20 transition-opacity duration-300 bg-amber-300 dark:bg-amber-600"></span>
      </a>
    </div>
    <div class="md:hidden">
      <button aria-label="Toggle menu" class="text-stone-700 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 rounded p-1.5 focus:ring-offset-2 focus:ring-offset-stone-100 dark:focus:ring-offset-stone-900">
        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

Neumorphic_Mega_Menu_Weather_Climate

A responsive, Neumorphic-styled mega menu component for weather and climate data, featuring a pastel color scheme and dark mode support.

Open Preview

                <nav class="bg-blue-100 dark:bg-gray-800 font-sans relative">
  <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-blue-600 dark:text-blue-300 text-2xl font-bold tracking-tight">
            <svg class="h-8 w-8 inline-block mr-2" 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="M3 15a4 4 0 004 4h9a5 5 0 005-5V7a2 2 0 00-2-2H5a2 2 0 00-2 2v8z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01"></path></svg>
            ClimateCast
          </a>
        </div>
      </div>
      <div class="hidden md:ml-6 md:flex md:items-center">
        <div class="relative group">
          <button class="text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 px-3 py-2 rounded-md text-sm font-medium
            bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
            group-hover:translate-y-px group-hover:shadow-neumorphic-inset-light dark:group-hover:shadow-neumorphic-inset-dark
            transition-all duration-300 ease-in-out
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
            relative">
            Forecasts
            <svg class="ml-2 -mr-0.5 h-4 w-4 inline-block transform group-hover:rotate-180 transition-transform duration-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 hidden group-hover:block z-50 mt-3 w-max rounded-lg p-6
            bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
            transition-all duration-300 ease-out origin-top-left">
            <div class="grid grid-cols-2 gap-y-4 gap-x-8">
              <div>
                <h3 class="text-blue-600 dark:text-blue-300 text-lg font-bold mb-2 pb-1 border-b border-blue-200 dark:border-gray-700">Daily Forecasts</h3>
                <a href="#" class="block text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                  hover:translate-x-1 transition-transform duration-200">
                  Today's Weather
                </a>
                <a href="#" class="block text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                  hover:translate-x-1 transition-transform duration-200">
                  7-Day Outlook
                </a>
                <a href="#" class="block text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                  hover:translate-x-1 transition-transform duration-200">
                  Hourly Breakdown
                </a>
              </div>
              <div>
                <h3 class="text-blue-600 dark:text-blue-300 text-lg font-bold mb-2 pb-1 border-b border-blue-200 dark:border-gray-700">Specialized</h3>
                <a href="#" class="block text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                  hover:translate-x-1 transition-transform duration-200">
                  Marine Weather
                </a>
                <a href="#" class="block text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                  hover:translate-x-1 transition-transform duration-200">
                  Aviation Weather
                </a>
                <a href="#" class="block text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                  hover:translate-x-1 transition-transform duration-200">
                  Agriculture Weather
                </a>
              </div>
              <div class="col-span-2">
                <h3 class="text-blue-600 dark:text-blue-300 text-lg font-bold mb-2 pb-1 border-b border-blue-200 dark:border-gray-700">Global Insights</h3>
                <div class="grid grid-cols-3 gap-2">
                  <a href="#" class="text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                    hover:translate-x-1 transition-transform duration-200">
                    Europe
                  </a>
                  <a href="#" class="text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                    hover:translate-x-1 transition-transform duration-200">
                    Americas
                  </a>
                  <a href="#" class="text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                    hover:translate-x-1 transition-transform duration-200">
                    Asia
                  </a>
                  <a href="#" class="text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                    hover:translate-x-1 transition-transform duration-200">
                    Africa
                  </a>
                  <a href="#" class="text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                    hover:translate-x-1 transition-transform duration-200">
                    Oceania
                  </a>
                  <a href="#" class="text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                    hover:translate-x-1 transition-transform duration-200">
                    Antarctica
                  </a>
                </div>
              </div>
              <div class="col-span-2 p-4 rounded-md shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
                <p class="text-blue-700 dark:text-gray-300 text-xs italic">"Always be prepared. Knowing the forecast is the first step."</p>
              </div>
            </div>
          </div>
        </div>

        <a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 px-3 py-2 rounded-md text-sm font-medium ml-4
          bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
          hover:translate-y-px hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
          transition-all duration-300 ease-in-out
          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
          Climate Data
        </a>
        <a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 px-3 py-2 rounded-md text-sm font-medium ml-4
          bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
          hover:translate-y-px hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
          transition-all duration-300 ease-in-out
          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
          Maps & Radar
        </a>
        <a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 px-3 py-2 rounded-md text-sm font-medium ml-4
          bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
          hover:translate-y-px hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
          transition-all duration-300 ease-in-out
          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
          Resources
        </a>
      </div>
      <div class="flex items-center md:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-blue-700 dark:text-blue-300
          hover:text-blue-900 dark:hover:text-blue-100 bg-blue-100 dark:bg-gray-800
          shadow-neumorphic-light dark:shadow-neumorphic-dark
          focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500
          data-[state=open]:translate-y-px data-[state=open]:shadow-neumorphic-inset-light dark:data-[state=open]:shadow-neumorphic-inset-dark
          transition-all duration-300 ease-in-out" aria-controls="mobile-menu" aria-expanded="false" data-state="closed">
          <span class="sr-only">Open main menu</span>
          <svg class="h-6 w-6 block" 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 class="h-6 w-6 hidden" 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="hidden md:hidden absolute w-full top-16 left-0 z-40 p-4
    bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <div class="relative group block">
        <button class="w-full text-left text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 block px-3 py-2 rounded-md text-base font-medium
          bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
          group-hover:translate-y-px group-hover:shadow-neumorphic-inset-light dark:group-hover:shadow-neumorphic-inset-dark
          transition-all duration-300 ease-in-out
          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
          flex items-center justify-between" data-mobile-submenu-toggle>
          Forecasts
          <svg class="ml-2 -mr-0.5 h-4 w-4 inline-block transform group-data-[state=open]:rotate-180 transition-transform duration-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="hidden mt-2 ml-4 space-y-1 data-[state=open]:block" data-mobile-submenu>
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100
            bg-blue-100 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
            hover:translate-y-px transition-all duration-200">
            Today's Weather
          </a>
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100
            bg-blue-100 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
            hover:translate-y-px transition-all duration-200">
            7-Day Outlook
          </a>
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100
            bg-blue-100 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
            hover:translate-y-px transition-all duration-200">
            Hourly Breakdown
          </a>
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100
            bg-blue-100 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
            hover:translate-y-px transition-all duration-200">
            Marine Weather
          </a>
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100
            bg-blue-100 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
            hover:translate-y-px transition-all duration-200">
            Aviation Weather
          </a>
        </div>
      </div>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100
        bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
        hover:translate-y-px hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
        transition-all duration-300 ease-in-out">
        Climate Data
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100
        bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
        hover:translate-y-px hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
        transition-all duration-300 ease-in-out">
        Maps & Radar
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100
        bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
        hover:translate-y-px hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
        transition-all duration-300 ease-in-out">
        Resources
      </a>
    </div>
  </div>
</nav>

<!-- Custom Styles for Neumorphism -->
<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #9ec2e6, -6px -6px 12px #c2e6ff; /* Soft pastel blue base */
  }
  .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #3a3a3a;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 4px 4px 8px #9ec2e6, inset -4px -4px 8px #c2e6ff;
  }
  .shadow-neumorphic-inset-dark {
    box-shadow: inset 4px 4px 8px #4a4a4a, inset -4px -4px 8px #3a3a3a;
  }

  /* Override Tailwind's default display for custom behavior */
  .group:hover .group-hover\:block {
    display: block;
  }
  .group-hover\:translate-y-px {
    transform: translateY(1px);
  }
  .hover\:translate-y-px:hover {
    transform: translateY(1px);
  }

  /* Mobile menu specific handling (requires JS to toggle classes) */
  .md\:hidden [aria-expanded='false'] + svg {
    display: block;
  }
  .md\:hidden [aria-expanded='true'] + svg {
    display: none;
  }
  .md\:hidden [aria-expanded='true'] {
    border-radius: 0.375rem; /* rounded-md */
    transform: translateY(1px);
    box-shadow: inset 4px 4px 8px #9ec2e6, inset -4px -4px 8px #c2e6ff; /* shadow-neumorphic-inset-light */
  }
  .dark .md\:hidden [aria-expanded='true'] {
    box-shadow: inset 4px 4px 8px #4a4a4a, inset -4px -4px 8px #3a3a3a; /* shadow-neumorphic-inset-dark */
  }

  [data-state="closed"] + svg:first-of-type {
    display: block;
  }
  [data-state="open"] + svg:first-of-type {
    display: none;
  }
  [data-state="closed"] + svg:last-of-type {
    display: none;
  }
  [data-state="open"] + svg:last-of-type {
    display: block;
  }

  /* For mobile submenu toggling */
  [data-mobile-submenu-toggle][data-state="open"] + svg {
    display: block; /* The arrow */
    transform: rotate(180deg);
  }
  [data-mobile-submenu-toggle][data-state="closed"] + svg {
    transform: rotate(0deg);
  }
  [data-mobile-submenu][data-state="open"] {
    display: block;
  }

</style>

<!-- Minimal JavaScript for mobile menu and submenu functionality -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]');
    const mobileMenu = document.getElementById('mobile-menu');

    if (mobileMenuButton && mobileMenu) {
      mobileMenuButton.addEventListener('click', () => {
        const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
        mobileMenuButton.setAttribute('aria-expanded', String(!isExpanded));
        mobileMenuButton.setAttribute('data-state', isExpanded ? 'closed' : 'open');
        mobileMenu.classList.toggle('hidden', isExpanded);

        // Toggle the hamburger/close icon
        mobileMenuButton.querySelector('svg:first-of-type').classList.toggle('hidden', !isExpanded);
        mobileMenuButton.querySelector('svg:last-of-type').classList.toggle('hidden', isExpanded);
      });
    }

    const mobileSubmenuToggles = document.querySelectorAll('[data-mobile-submenu-toggle]');

    mobileSubmenuToggles.forEach(toggle => {
      toggle.setAttribute('data-state', 'closed'); // Initialize state
      toggle.addEventListener('click', () => {
        const submenu = toggle.nextElementSibling; // Get the corresponding submenu div
        if (submenu && submenu.hasAttribute('data-mobile-submenu')) {
          const isExpanded = toggle.getAttribute('data-state') === 'open';
          toggle.setAttribute('data-state', isExpanded ? 'closed' : 'open');
          submenu.classList.toggle('hidden', isExpanded);
          submenu.setAttribute('data-state', isExpanded ? 'closed' : 'open');
        }
      });
    });
  });
</script>

Mega Menu Component - Forest/Green, Microinteractions, Non-profit

A responsive mega menu component designed for non-profit/charity websites, featuring a forest/green color palette, microinteractions on hover, and full dark mode support. It provides sections for 'Our Mission', 'How We Help', 'Events & News', and 'Get Involved'.

Open Preview

                <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-emerald-700 dark:text-emerald-300 text-2xl font-bold font-serif">Green<span class="text-emerald-500">Heart</span></a>
        </div>
      </div>
      <div class="hidden md:ml-6 md:flex md:items-center">
        <div class="relative group">
          <button class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-emerald-700 hover:border-emerald-500 dark:text-gray-300 dark:hover:text-emerald-300 dark:hover:border-emerald-300 transition duration-300 ease-in-out">
            About Us
            <svg class="ml-2 -mr-0.5 h-4 w-4 transform group-hover:rotate-180 transition duration-300 ease-in-out" 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 -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">
            <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
              <div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 dark:bg-gray-700">
                <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                  <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-emerald-500 text-white 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" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a4 4 0 014-4h12a4 4 0 014 4v2H17zm0 0c-4.142 0-7.5-3.358-7.5-7.5S12.858 5 17 5s7.5 3.358 7.5 7.5S21.142 20 17 20zM9 10a1 1 0 011 1v2a1 1 0 102 0v-2a1 1 0 011-1h-.5a1 1 0 100 2h.5V13a1 1 0 01-1 1h-2" />
                    </svg>
                  </div>
                  <div class="ml-4">
                    <p class="text-base font-medium text-gray-900 dark:text-white">Our Mission</p>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Learn about our core values and objectives.</p>
                  </div>
                </a>

                <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                  <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-emerald-500 text-white 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" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                  </div>
                  <div class="ml-4">
                    <p class="text-base font-medium text-gray-900 dark:text-white">Our Impact</p>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">See the difference your support makes.</p>
                  </div>
                </a>

                <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                  <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-emerald-500 text-white 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" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10m0 0h16m-16 0L8 7m4 0h4m4 0V7m0 0V4m0 0H4" />
                    </svg>
                  </div>
                  <div class="ml-4">
                    <p class="text-base font-medium text-gray-900 dark:text-white">Team & Board</p>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Meet the people behind our cause.</p>
                  </div>
                </a>
              </div>
              <div class="px-5 py-5 bg-gray-50 dark:bg-gray-800 sm:px-8 sm:py-8">
                <div>
                  <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wide dark:text-gray-400">Recent Stories</h3>
                  <ul class="mt-4 space-y-4">
                    <li class="text-base truncate">
                      <a href="#" class="font-medium text-gray-900 hover:text-emerald-600 dark:text-white dark:hover:text-emerald-300 transition duration-200 ease-in-out">
                        Feeding hope: Our latest food drive success
                      </a>
                    </li>
                    <li class="text-base truncate">
                      <a href="#" class="font-medium text-gray-900 hover:text-emerald-600 dark:text-white dark:hover:text-emerald-300 transition duration-200 ease-in-out">
                        Clean water for all: Updates from the field
                      </a>
                    </li>
                  </ul>
                </div>
                <div class="mt-5 text-sm">
                  <a href="#" class="font-medium text-emerald-600 hover:text-emerald-500 dark:text-emerald-300 dark:hover:text-emerald-200 transition duration-200 ease-in-out">
                    View all stories <span aria-hidden="true">&rarr;</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="relative group ml-8">
          <button class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-emerald-700 hover:border-emerald-500 dark:text-gray-300 dark:hover:text-emerald-300 dark:hover:border-emerald-300 transition duration-300 ease-in-out">
            What We Do
            <svg class="ml-2 -mr-0.5 h-4 w-4 transform group-hover:rotate-180 transition duration-300 ease-in-out" 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 -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">
            <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
              <div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 dark:bg-gray-700">
                <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                  <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-emerald-500 text-white 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" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5s3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18s-3.332.477-4.5 1.253" />
                    </svg>
                  </div>
                  <div class="ml-4">
                    <p class="text-base font-medium text-gray-900 dark:text-white">Environmental Protection</p>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Preserving biodiversity and natural habitats.</p>
                  </div>
                </a>
                <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                  <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-emerald-500 text-white 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" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21H3v-3.375m0 0h1.75C7.79 17.027 9.852 18 12 18h2m-4-0h4m-9-3c7.432 0 10.634-2.296 11.235-4.48c.214-.733.018-1.455-.088-2.072 0 0-.714 1.554-1.127 2.015A.75.75 0 0114 10z" />
                    </svg>
                  </div>
                  <div class="ml-4">
                    <p class="text-base font-medium text-gray-900 dark:text-white">Community Development</p>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Empowering local communities through sustainable projects.</p>
                  </div>
                </a>
                <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                  <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-emerald-500 text-white 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" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                    </svg>
                  </div>
                  <div class="ml-4">
                    <p class="text-base font-medium text-gray-900 dark:text-white">Education & Awareness</p>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Spreading knowledge about environmental issues.</p>
                  </div>
                </a>
              </div>
              <div class="bg-gray-50 dark:bg-gray-800 px-5 py-5 sm:px-8 sm:py-8">
                <div>
                  <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wide dark:text-gray-400">Case Studies</h3>
                  <ul class="mt-4 space-y-4">
                    <li class="text-base truncate">
                      <a href="#" class="font-medium text-gray-900 hover:text-emerald-600 dark:text-white dark:hover:text-emerald-300 transition duration-200 ease-in-out">
                        Restoring Local Ecosystems
                      </a>
                    </li>
                    <li class="text-base truncate">
                      <a href="#" class="font-medium text-gray-900 hover:text-emerald-600 dark:text-white dark:hover:text-emerald-300 transition duration-200 ease-in-out">
                        Sustainable Farming Initiatives
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

        <a href="#" class="ml-8 px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-emerald-700 hover:border-emerald-500 dark:text-gray-300 dark:border-transparent dark:hover:text-emerald-300 dark:hover:border-emerald-300 transition duration-300 ease-in-out">Events & News</a>
        <a href="#" class="ml-8 px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-emerald-700 hover:border-emerald-500 dark:text-gray-300 dark:border-transparent dark:hover:text-emerald-300 dark:hover:border-emerald-300 transition duration-300 ease-in-out">Get Involved</a>
      </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-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-emerald-500 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <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. -->
          <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" id="mobile-menu">
    <div class="pt-2 pb-3 space-y-1">
      <a href="#" class="bg-emerald-50 block pl-3 pr-4 py-2 border-l-4 border-emerald-500 text-base font-medium text-emerald-700 dark:bg-gray-700 dark:text-emerald-300 dark:border-emerald-300">About Us</a>
      <a href="#" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-700 dark:hover:border-gray-500">What We Do</a>
      <a href="#" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-700 dark:hover:border-gray-500">Events & News</a>
      <a href="#" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-700 dark:hover:border-gray-500">Get Involved</a>
    </div>
  </div>
</nav>

Mega Menu Component - Memphis Earth Tones Food/Restaurant

A responsive mega menu component for food/restaurant websites, inspired by Memphis design with earth tones. Features bold colors, geometric shapes, and playful patterns. Includes dark mode support.

Open Preview

                <nav class="bg-amber-100 dark:bg-stone-900 border-b-4 border-amber-300 dark:border-stone-700 font-sans">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <a href="#" class="text-stone-800 dark:text-stone-100 text-3xl font-extrabold tracking-tight relative">
      <span class="block absolute -top-1 -left-1 w-6 h-6 bg-lime-400 dark:bg-lime-600 transform rotate-45"></span>
      <span class="block relative z-10">FoodieHub</span>
    </a>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-stone-700 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 font-semibold text-lg transition-colors duration-300">Home</a>
      <div class="relative group">
        <button class="text-stone-700 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 font-semibold text-lg transition-colors duration-300 focus:outline-none">Menu <svg class="w-4 h-4 ml-1 inline-block transform group-hover:rotate-180 transition-transform duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg></button>
        <div class="absolute left-1/2 -translate-x-1/2 mt-4 w-[600px] p-6 bg-lime-50 dark:bg-stone-800 rounded-xl shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 ease-in-out transform scale-95 group-hover:scale-100 border-4 border-lime-300 dark:border-stone-700 grid grid-cols-2 gap-6" style="clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(50% + 5px) calc(100% - 10px), 50% 100%, calc(50% - 5px) calc(100% - 10px), 0 calc(100% - 10px));">
          <div>
            <h3 class="font-bold text-xl text-stone-800 dark:text-stone-100 mb-4 flex items-center">
              <span class="bg-orange-400 dark:bg-orange-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2 text-sm">🍴</span> Popular Categories
            </h3>
            <ul class="space-y-3">
              <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 font-medium relative hover:pl-3 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-orange-400 dark:before:bg-orange-600 before:scale-0 hover:before:scale-100 before:transition-all before:duration-200">Pizzas & Pasta</a></li>
              <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 font-medium relative hover:pl-3 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-orange-400 dark:before:bg-orange-600 before:scale-0 hover:before:scale-100 before:transition-all before:duration-200">Burgers & Sandwiches</a></li>
              <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 font-medium relative hover:pl-3 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-orange-400 dark:before:bg-orange-600 before:scale-0 hover:before:scale-100 before:transition-all before:duration-200">Asian Delights</a></li>
              <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 font-medium relative hover:pl-3 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-orange-400 dark:before:bg-orange-600 before:scale-0 hover:before:scale-100 before:transition-all before:duration-200">Healthy Options</a></li>
              <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 font-medium relative hover:pl-3 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-orange-400 dark:before:bg-orange-600 before:scale-0 hover:before:scale-100 before:transition-all before:duration-200">Desserts & Drinks</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-bold text-xl text-stone-800 dark:text-stone-100 mb-4 flex items-center">
              <span class="bg-purple-400 dark:bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2 text-sm">✨</span> Today's Specials
            </h3>
            <a href="#" class="block bg-lime-100 dark:bg-stone-700 p-3 rounded-lg flex items-center space-x-3 group hover:bg-lime-200 dark:hover:bg-stone-600 transition-colors duration-200">
              <img src="https://picsum.photos/60/60?random=1" alt="Special Dish" class="rounded-md object-cover border-2 border-lime-300 dark:border-stone-500">
              <div>
                <p class="font-semibold text-stone-800 dark:text-stone-100 group-hover:text-orange-600 dark:group-hover:text-orange-400">Spicy Beef Tacos</p>
                <p class="text-sm text-stone-600 dark:text-stone-400">Authentic Mexican flavor, limited time!</p>
              </div>
            </a>
            <a href="#" class="block bg-lime-100 dark:bg-stone-700 p-3 rounded-lg flex items-center space-x-3 group mt-3 hover:bg-lime-200 dark:hover:bg-stone-600 transition-colors duration-200">
              <img src="https://picsum.photos/60/60?random=2" alt="Special Dish" class="rounded-md object-cover border-2 border-lime-300 dark:border-stone-500">
              <div>
                <p class="font-semibold text-stone-800 dark:text-stone-100 group-hover:text-orange-600 dark:group-hover:text-orange-400">Creamy Garlic Pasta</p>
                <p class="text-sm text-stone-600 dark:text-stone-400">Vegetarian option, rich and delightful.</p>
              </div>
            </a>
            <div class="mt-4 flex justify-center">
                <button class="px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white font-bold rounded-lg shadow-md transition-all duration-300 text-sm transform hover:scale-105 active:scale-95 relative overflow-hidden group">
                    <span class="absolute top-0 left-0 w-full h-full bg-orange-600 dark:bg-orange-700 transform scale-x-0 origin-right transition-transform duration-300 group-hover:scale-x-100 group-hover:origin-left"></span>
                    <span class="relative z-10">View All Specials</span>
                </button>
            </div>
          </div>
        </div>
      </div>
      <a href="#" class="text-stone-700 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 font-semibold text-lg transition-colors duration-300">About Us</a>
      <a href="#" class="text-stone-700 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 font-semibold text-lg transition-colors duration-300">Contact</a>
    </div>
    <div class="flex items-center space-x-4">
        <button class="p-2 rounded-full hidden md:inline-block bg-lime-200 dark:bg-stone-700 hover:bg-lime-300 dark:hover:bg-stone-600 transition-colors duration-200 shadow-sm">
            <svg class="w-6 h-6 text-stone-700 dark:text-stone-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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
        </button>
        <button id="mobile-menu-button" class="md:hidden hamburger p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-400 dark:focus:ring-purple-400">
          <span class="hamburger-line block w-6 h-1 bg-stone-700 dark:bg-stone-200 transform transition duration-300 ease-in-out"></span>
          <span class="hamburger-line block w-6 h-1 mt-1 bg-stone-700 dark:bg-stone-200 transform transition duration-300 ease-in-out"></span>
          <span class="hamburger-line block w-6 h-1 mt-1 bg-stone-700 dark:bg-stone-200 transform transition duration-300 ease-in-out"></span>
        </button>
    </div>
  </div>

  <div id="mobile-menu" class="mobile-menu md:hidden fixed inset-0 bg-amber-100 dark:bg-stone-900 transform translate-x-full transition-transform duration-300 ease-in-out z-50 overflow-y-auto pt-20">
    <div class="p-4 flex flex-col space-y-4">
      <a href="#" class="block py-3 text-stone-800 dark:text-stone-100 text-xl font-semibold border-b border-lime-300 dark:border-stone-700 transition-colors duration-200 hover:text-orange-600 dark:hover:text-orange-400">Home</a>
      <div class="relative">
        <button class="w-full text-left py-3 text-stone-800 dark:text-stone-100 text-xl font-semibold border-b border-lime-300 dark:border-stone-700 flex justify-between items-center transition-colors duration-200 hover:text-orange-600 dark:hover:text-orange-400" onclick="this.nextElementSibling.classList.toggle('hidden'); this.querySelector('svg').classList.toggle('rotate-180')">
          Menu
          <svg class="w-5 h-5 transition-transform duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
        </button>
        <div class="hidden mt-4 p-4 bg-lime-50 dark:bg-stone-800 rounded-lg shadow-inner border-2 border-lime-300 dark:border-stone-700">
          <h4 class="font-bold text-lg text-stone-800 dark:text-stone-100 border-b pb-2 mb-3 border-orange-300 dark:border-orange-500">Popular Categories</h4>
          <ul class="space-y-2">
            <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">Pizzas & Pasta</a></li>
            <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">Burgers & Sandwiches</a></li>
            <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">Asian Delights</a></li>
            <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">Healthy Options</a></li>
            <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">Desserts & Drinks</a></li>
          </ul>
          <h4 class="font-bold text-lg text-stone-800 dark:text-stone-100 border-b pb-2 mt-6 mb-3 border-purple-300 dark:border-purple-500">Today's Specials</h4>
          <a href="#" class="block bg-lime-100 dark:bg-stone-700 p-2 rounded-md flex items-center space-x-2 mt-2 hover:bg-lime-200 dark:hover:bg-stone-600 transition-colors duration-200">
            <img src="https://picsum.photos/50/50?random=3" alt="Special Dish" class="rounded-sm object-cover">
            <div>
              <p class="font-semibold text-stone-800 dark:text-stone-100 text-sm">Cheesy Garlic Bread</p>
              <p class="text-xs text-stone-600 dark:text-stone-400">Perfect appetizer!</p>
            </div>
          </a>
        </div>
      </div>
      <a href="#" class="block py-3 text-stone-800 dark:text-stone-100 text-xl font-semibold border-b border-lime-300 dark:border-stone-700 transition-colors duration-200 hover:text-orange-600 dark:hover:text-orange-400">About Us</a>
      <a href="#" class="block py-3 text-stone-800 dark:text-stone-100 text-xl font-semibold border-b border-lime-300 dark:border-stone-700 transition-colors duration-200 hover:text-orange-600 dark:hover:text-orange-400">Contact</a>
      <button class="px-4 py-3 bg-orange-500 hover:bg-orange-600 text-white font-bold rounded-lg shadow-md transition-all duration-300 text-lg transform hover:scale-105 active:scale-95 mt-4">
        <svg class="w-6 h-6 inline-block mr-2" 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
        Your Cart
      </button>
    </div>
    <button id="close-mobile-menu" class="absolute top-4 right-4 p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-400 dark:focus:ring-purple-400">
        <svg class="w-8 h-8 text-stone-700 dark:text-stone-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="M6 18L18 6M6 6l12 12"></path></svg>
    </button>
  </div>
</nav>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
    const closeMobileMenuButton = document.getElementById('close-mobile-menu');

    function toggleMobileMenu() {
      mobileMenu.classList.toggle('translate-x-full');
      mobileMenuButton.classList.toggle('open'); // For hamburger icon animation
    }

    mobileMenuButton.addEventListener('click', toggleMobileMenu);
    closeMobileMenuButton.addEventListener('click', toggleMobileMenu);

    // Close menu when clicking outside (optional)
    // document.addEventListener('click', function(event) {
    //   if (!mobileMenu.contains(event.target) && !mobileMenuButton.contains(event.target) && !mobileMenu.classList.contains('translate-x-full')) {
    //     toggleMobileMenu();
    //   }
    // });

    // Hamburger animation (CSS only for transform, JS to toggle class)
    const style = document.createElement('style');
    style.innerHTML = `
      .hamburger-line:nth-child(1) { transform-origin: top left; }
      .hamburger-line:nth-child(3) { transform-origin: bottom left; }

      .hamburger.open .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 0px); }
      .hamburger.open .hamburger-line:nth-child(2) { opacity: 0; }
      .hamburger.open .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(5px, 1px); }
    `;
    document.head.appendChild(style);
  });
</script>

Mega Menu Component

A complex, responsive mega menu component designed with a monospace/developer aesthetic and warm neutral color scheme, suitable for professional consulting/services websites. Includes dark mode support.

Open Preview

                <nav class="bg-gray-100 font-mono tracking-tighter shadow-sm dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="flex h-16 justify-between items-center">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <a href="#" class="text-gray-800 dark:text-gray-200 text-xl font-bold uppercase"><span class="text-orange-500">[</span>DEV<span class="text-orange-500">]</span>CONSULT</a>
        </div>
      </div>
      <div class="hidden md:ml-6 md:flex md:items-center">
        <button type="button" class="relative rounded-full bg-gray-200 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:text-gray-100 dark:focus:ring-offset-gray-900">
          <span class="absolute -inset-1.5"></span>
          <span class="sr-only">View notifications</span>
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
          </svg>
        </button>

        <div class="relative ml-3 group">
          <div>
            <button type="button" class="relative flex rounded-full bg-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:bg-gray-800 dark:focus:ring-offset-gray-900" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
              <span class="absolute -inset-1.5"></span>
              <span class="sr-only">Open user menu</span>
              <img class="h-8 w-8 rounded-full border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
            </button>
          </div>

          <!-- Dropdown menu, show/hide based on menu state. -->
          <div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-700 hidden group-hover:block" 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 hover:bg-gray-100 dark:text-gray-300 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 hover:bg-gray-100 dark:text-gray-300 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 hover:bg-gray-100 dark:text-gray-300 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 md:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="relative inline-flex items-center justify-center rounded-md bg-gray-200 p-2 text-gray-700 hover:bg-gray-300 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:focus:ring-offset-gray-900" aria-controls="mobile-menu" aria-expanded="false">
          <span class="absolute -inset-0.5"></span>
          <span class="sr-only">Open main menu</span>
          <!-- Menu open: "hidden", Menu closed: "block" -->
          <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
          </svg>
          <!-- Menu open: "block", Menu closed: "hidden" -->
          <svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Main Navigation Links -->
    <div class="hidden md:block py-4">
      <div class="flex space-x-8">
        <div class="group relative">
          <button class="text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium dark:text-gray-200 dark:hover:text-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900">[.SERVICES]</button>
          <div class="hidden group-hover:block absolute left-0 top-full z-10 w-screen max-w-5xl overflow-hidden rounded-lg bg-gray-50 p-6 shadow-xl dark:bg-gray-800 dark:ring-gray-700">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div>
                <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// CORE SERVICES</h3>
                <ul class="mt-4 space-y-2">
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Cloud Infrastructure</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> DevOps Automation</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Cybersecurity Consulting</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Data Engineering</a></li>
                </ul>
              </div>
              <div>
                <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// INDUSTRY SOLUTIONS</h3>
                <ul class="mt-4 space-y-2">
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> FinTech Deployment</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Healthcare IT</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> E-commerce Platforms</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Government & Public Sector</a></li>
                </ul>
              </div>
              <div class="bg-gray-100 p-4 rounded-md dark:bg-gray-700">
                <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// FEATURED RESOURCE</h3>
                <img class="mt-4 w-full h-32 object-cover rounded-md" src="https://picsum.photos/300/200?random=1" alt="Featured Resource">
                <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">'Mastering Kubernetes: A Developer's Guide to Container Orchestration.' Dive deep into scalable deployments.</p>
                <a href="#" class="mt-3 inline-flex items-center text-sm font-medium text-orange-600 hover:text-orange-500 dark:text-orange-400 dark:hover:text-orange-300">READ_DOCS() <span aria-hidden="true"> &rarr;</span></a>
              </div>
            </div>
          </div>
        </div>

        <div class="group relative">
          <button class="text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium dark:text-gray-200 dark:hover:text-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900">[.SOLUTIONS]</button>
          <div class="hidden group-hover:block absolute left-0 top-full z-10 w-screen max-w-2xl overflow-hidden rounded-lg bg-gray-50 p-6 shadow-xl dark:bg-gray-800 dark:ring-gray-700">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
              <div>
                <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// BY INDUSTRY</h3>
                <ul class="mt-4 space-y-2">
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Energy Sector Automation</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Manufacturing Digitalization</a></li>
                </ul>
              </div>
              <div>
                <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// BY TECHNOLOGY</h3>
                <ul class="mt-4 space-y-2">
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">AI/ML Integration</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Blockchain Development</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <a href="#" class="text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium dark:text-gray-200 dark:hover:text-orange-400">[.ABOUT_US]</a>
        <a href="#" class="text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium dark:text-gray-200 dark:hover:text-orange-400">[.BLOG]</a>
        <a href="#" class="text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium dark:text-gray-200 dark:hover:text-orange-400">[.CONTACT]</a>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden" id="mobile-menu">
    <div class="space-y-1 px-2 pb-3 pt-2">
      <div class="group relative">
        <button class="w-full text-left text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-base font-medium dark:text-gray-200 dark:hover:text-orange-400">[.SERVICES]</button>
        <div class="mt-2 space-y-1 pl-4">
          <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// CORE SERVICES</p>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Cloud Infrastructure</a>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> DevOps Automation</a>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Cybersecurity Consulting</a>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Data Engineering</a>
          
          <p class="mt-4 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// INDUSTRY SOLUTIONS</p>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> FinTech Deployment</a>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Healthcare IT</a>
        </div>
      </div>
      
      <div class="group relative">
        <button class="w-full text-left text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-base font-medium dark:text-gray-200 dark:hover:text-orange-400">[.SOLUTIONS]</button>
        <div class="mt-2 space-y-1 pl-4">
          <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// BY INDUSTRY</p>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Energy Sector Automation</a>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Manufacturing Digitalization</a>
          <p class="mt-4 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// BY TECHNOLOGY</p>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">AI/ML Integration</a>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Blockchain Development</a>
        </div>
      </div>

      <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 hover:text-orange-500 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-orange-400">[.ABOUT_US]</a>
      <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 hover:text-orange-500 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-orange-400">[.BLOG]</a>
      <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 hover:text-orange-500 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-orange-400">[.CONTACT]</a>
    </div>
    <div class="border-t border-gray-200 pb-3 pt-4 dark:border-gray-700">
      <div class="flex items-center px-5">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium leading-none text-gray-800 dark:text-gray-200">John Doe</div>
          <div class="text-sm font-medium leading-none text-gray-500 dark:text-gray-400">[email protected]</div>
        </div>
        <button type="button" class="ml-auto flex-shrink-0 rounded-full bg-gray-200 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:text-gray-100 dark:focus:ring-offset-gray-900">
          <span class="sr-only">View notifications</span>
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
          </svg>
        </button>
      </div>
      <div class="mt-3 space-y-1 px-2">
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700">Your Profile</a>
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700">Settings</a>
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700">Sign out</a>
      </div>
    </div>
  </div>
</nav>

Cyberpunk Mega Menu

A complex, cyberpunk-themed mega menu for food/restaurant websites, featuring neon accents, dark backgrounds, full responsiveness, and dark mode support.

Open Preview

                <nav class="bg-zinc-950 text-white shadow-lg dark:bg-black relative font-mono">
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
    <a href="#" class="text-3xl font-bold tracking-widest text-lime-400 hover:text-lime-300 transition duration-300">CYBERBYTE</a>
    <div class="hidden lg:flex items-center space-x-8">
      <a href="#" class="text-lg uppercase hover:text-lime-400 transition duration-300 border-b-2 border-transparent hover:border-lime-400 pb-1">Home</a>
      <div class="group relative">
        <button class="text-lg uppercase hover:text-lime-400 transition duration-300 focus:outline-none border-b-2 border-transparent hover:border-lime-400 pb-1 flex items-center">
          Menu <svg class="ml-2 w-4 h-4 transform group-hover:rotate-180 transition duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
        </button>
        <div class="absolute hidden group-hover:block w-fit min-w-[700px] right-0 mt-3 p-6 bg-zinc-900 border border-lime-400 shadow-xl rounded-md transition duration-300 opacity-0 group-hover:opacity-100 dark:bg-zinc-950">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
              <h3 class="text-xl font-semibold mb-3 text-electric-blue-400 border-b border-lime-400 pb-2">Categories</h3>
              <ul class="space-y-2 text-sm">
                <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Neural Nosh (Main Courses)</a></li>
                <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Synth-Snacks (Appetizers)</a></li>
                <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Glitched Grub (Vegan)</a></li>
                <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Data Drinks (Beverages)</a></li>
                <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Cyber Sweets (Desserts)</a></li>
                <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Processor Packs (Combos)</a></li>
              </ul>
            </div>
            <div>
              <h3 class="text-xl font-semibold mb-3 text-hot-pink-400 border-b border-lime-400 pb-2">Featured Items</h3>
              <div class="space-y-4">
                <div class="flex items-center space-x-3">
                  <img src="https://picsum.photos/60/60?random=1" alt="Featured Dish" class="w-16 h-16 object-cover rounded-md border-2 border-lime-400">
                  <div>
                    <p class="font-medium text-gray-200">Quantum Burger</p>
                    <p class="text-sm text-gray-400">Synth-meat, bio-cheese, hyper-sauce.</p>
                    <span class="text-lime-400 font-bold">$15.99</span>
                  </div>
                </div>
                <div class="flex items-center space-x-3">
                  <img src="https://picsum.photos/60/60?random=2" alt="Featured Dish" class="w-16 h-16 object-cover rounded-md border-2 border-electric-blue-400">
                  <div>
                    <p class="font-medium text-gray-200">Neon Noodles</p>
                    <p class="text-sm text-gray-400">Glowing pasta, cyber-shrimp.</p>
                    <span class="text-lime-400 font-bold">$18.50</span>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <h3 class="text-xl font-semibold mb-3 text-lime-400 border-b border-lime-400 pb-2">Order Now!</h3>
              <div class="relative overflow-hidden w-full h-40 rounded-lg">
                <img src="https://picsum.photos/400/200?random=3" alt="Order Call to Action" class="w-full h-full object-cover transform scale-105 hover:scale-100 transition-transform duration-500 rounded-lg border-2 border-hot-pink-400">
                <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent flex items-end p-4">
                    <a href="#" class="text-hot-pink-400 text-lg font-bold hover:underline">Explore Full Menu <span class="text-white ml-1">&#8594;</span></a>
                </div>
              </div>
              <p class="mt-3 text-sm text-gray-400">Deliveries to sectors Alpha, Beta, Gamma.</p>
               <button class="mt-4 w-full bg-electric-blue-600 hover:bg-electric-blue-500 text-white py-2 px-4 rounded-md font-bold transition duration-300 transform hover:scale-105 shadow-neon-blue-glow">
                Place Order
              </button>
            </div>
          </div>
        </div>
      </div>
      <a href="#" class="text-lg uppercase hover:text-electric-blue-400 transition duration-300 border-b-2 border-transparent hover:border-electric-blue-400 pb-1">Locations</a>
      <a href="#" class="text-lg uppercase hover:text-hot-pink-400 transition duration-300 border-b-2 border-transparent hover:border-hot-pink-400 pb-1">About Us</a>
      <a href="#" class="text-lg uppercase hover:text-lime-400 transition duration-300 border-b-2 border-transparent hover:border-lime-400 pb-1">Contact</a>
    </div>

    <div class="hidden lg:flex items-center space-x-4">
      <div class="relative group">
        <button class="flex items-center space-x-2 text-white hover:text-lime-400 transition duration-300 focus:outline-none">
          <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-9 h-9 rounded-full object-cover border-2 border-lime-400">
          <span class="text-lg">User 1</span>
        </button>
        <ul class="absolute hidden group-hover:block right-0 mt-3 w-48 bg-zinc-900 border border-lime-400 dark:bg-zinc-950 shadow-lg rounded-md overflow-hidden z-10">
          <li><a href="#" class="block px-4 py-3 text-gray-300 hover:bg-zinc-800 hover:text-electric-blue-300 transition duration-200 border-b border-zinc-800">Profile</a></li>
          <li><a href="#" class="block px-4 py-3 text-gray-300 hover:bg-zinc-800 hover:text-electric-blue-300 transition duration-200 border-b border-zinc-800">Order History</a></li>
          <li><a href="#" class="block px-4 py-3 text-gray-300 hover:bg-zinc-800 hover:text-hot-pink-300 transition duration-200">Settings</a></li>
          <li><a href="#" class="block px-4 py-3 text-gray-300 hover:bg-zinc-800 hover:text-hot-pink-300 transition duration-200">Logout</a></li>
        </ul>
      </div>
      <button aria-label="Toggle dark mode" class="p-2 rounded-full bg-zinc-800 hover:bg-zinc-700 text-lime-400 hover:text-hot-pink-400 transition duration-300 focus:outline-none dark:bg-zinc-900 dark:hover:bg-zinc-800" onclick="document.documentElement.classList.toggle('dark')">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
      </button>
    </div>

    <div class="lg:hidden flex items-center">
      <button aria-label="Toggle dark mode" class="mr-4 p-2 rounded-full bg-zinc-800 hover:bg-zinc-700 text-lime-400 hover:text-hot-pink-400 transition duration-300 focus:outline-none dark:bg-zinc-900 dark:hover:bg-zinc-800" onclick="document.documentElement.classList.toggle('dark')">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
      </button>
      <button id="mobile-menu-button" class="text-white hover:text-lime-400 focus:outline-none p-2 rounded-md bg-zinc-800 hover:bg-zinc-700 transition duration-300 dark:bg-zinc-900 dark:hover:bg-zinc-800">
        <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu -->
  <div id="mobile-menu" class="hidden lg:hidden flex-col bg-zinc-950 p-6 space-y-4 border-t border-lime-400 dark:bg-black">
    <a href="#" class="block text-lg uppercase text-white hover:text-lime-400 transition duration-300 py-2 border-b border-zinc-800">Home</a>
    <div class="relative group">
      <button class="flex items-center justify-between w-full text-lg uppercase text-white hover:text-lime-400 transition duration-300 focus:outline-none py-2 border-b border-zinc-800">
        Menu <svg class="ml-2 w-4 h-4 transform group-hover:rotate-180 transition duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
      </button>
      <div class="hidden group-hover:block py-2 pl-4 text-sm bg-zinc-900 border-l border-lime-400 dark:bg-zinc-950">
        <ul class="space-y-2">
          <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Neural Nosh</a></li>
          <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Synth-Snacks</a></li>
          <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Glitched Grub</a></li>
          <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Data Drinks</a></li>
          <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Cyber Sweets</a></li>
          <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Processor Packs</a></li>
        </ul>
      </div>
    </div>
    <a href="#" class="block text-lg uppercase text-white hover:text-electric-blue-400 transition duration-300 py-2 border-b border-zinc-800">Locations</a>
    <a href="#" class="block text-lg uppercase text-white hover:text-hot-pink-400 transition duration-300 py-2 border-b border-zinc-800">About Us</a>
    <a href="#" class="block text-lg uppercase text-white hover:text-lime-400 transition duration-300 py-2 border-b border-zinc-800">Contact</a>
    <div class="flex items-center space-x-2 py-2 border-b border-zinc-800">
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full object-cover border-2 border-lime-400">
      <span class="text-lg text-white">User 1 Profile</span>
    </div>
    <button class="w-full bg-electric-blue-600 hover:bg-electric-blue-500 text-white py-3 rounded-md font-bold transition duration-300 transform hover:scale-105 shadow-neon-blue-glow">
      Place Order
    </button>
  </div>
</nav>

<style>
  /* Custom colors for cyberpunk theme */
  .text-electric-blue-400 { color: #00FFFF; /* Cyan */ }
  .hover\:text-electric-blue-300:hover { color: #00DDDD; }
  .bg-electric-blue-600 { background-color: #00BFFF; /* Deep Sky Blue */ }
  .hover\:bg-electric-blue-500:hover { background-color: #00AADD; }
  
  .text-hot-pink-400 { color: #FF00FF; /* Magenta */ }
  .hover\:text-hot-pink-300:hover { color: #DD00DD; }

  .text-lime-400 { color: #A7FF00; /* Neon Green */ }
  .hover\:text-lime-300:hover { color: #88EE00; }

  .border-electric-blue-400 { border-color: #00FFFF; }
  .border-hot-pink-400 { border-color: #FF00FF; }
  .border-lime-400 { border-color: #A7FF00; }

  .shadow-neon-blue-glow {
    box-shadow: 0 0 8px #00BFFF, 0 0 16px #00BFFF, 0 0 24px #00BFFF, 0 0 32px #00BFFF;
  }
  .dark .shadow-neon-blue-glow {
    box-shadow: 0 0 8px #00BFFF, 0 0 16px #00BFFF;
  }
</style>

<script>
  document.getElementById('mobile-menu-button').addEventListener('click', function() {
    document.getElementById('mobile-menu').classList.toggle('hidden');
    document.getElementById('mobile-menu').classList.toggle('flex');
  });
</script>