Rechercher des composants

Catégories

Composants Méga Menu

Méga Menu

Grand panneau déroulant affichant plusieurs options de navigation

Composant Mega Menu - Papier/Impression Retro Crypto

Un méga composant de menu simple et réactif avec un design inspiré du papier/de l’impression et une palette de couleurs rétro/vintage, adapté aux applications de crypto-monnaie et de blockchain. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

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

Composant Mega Menu - Interface utilisateur en mode sombre (Finance/Banque)

Un méga composant de menu simple et réactif conçu pour les interfaces finance/banque, avec une interface utilisateur en mode sombre avec des neutres froids. Comprend des sections importantes pour les liens populaires, les services de compte et l’accès rapide.

Ouvrir Aperçu

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

Composant Mega Menu - Neumorphic Vibrant E-commerce

Un méga composant de menu complexe et réactif conçu avec un style de commerce électronique neumorphe et dynamique. Comprend plusieurs colonnes, des exemples d’images et des listes de catégories, avec une prise en charge complète du mode sombre.

Ouvrir Aperçu

                <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

Un composant de méga menu simple et réactif conçu avec une esthétique Art Déco, utilisant une palette de couleurs violet/violet, adapté aux applications technologiques/SaaS. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

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

Composant Mega Menu - Neon Glow

Un composant de méga menu simple et réactif avec des effets de néon/lueur, des couleurs neutres chaudes et la prise en charge du mode sombre, adapté aux systèmes de réservation.

Ouvrir Aperçu

                <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

Un méga composant de menu réactif, de style neumorphique, pour les données météorologiques et climatiques, avec une palette de couleurs pastel et la prise en charge du mode sombre.

Ouvrir Aperçu

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

Composant Mega Menu - Forêt/Vert, Microinteractions, Organisme à but non lucratif

Un composant de méga menu réactif conçu pour les sites Web à but non lucratif/caritatifs, avec une palette de couleurs forêt/vert, des micro-interactions au survol et une prise en charge complète du mode sombre. Il fournit des sections pour 'Notre mission', 'Comment nous aidons', 'Événements et actualités' et 'Impliquez-vous'.

Ouvrir Aperçu

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

Méga composant de menu - Memphis Earth Tones Food/Restaurant

Un méga composant de menu réactif pour les sites Web d’alimentation/restaurant, inspiré du design de Memphis avec des tons de terre. Présente des couleurs vives, des formes géométriques et des motifs ludiques. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

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

Composant Mega Menu

Un composant de méga menu complexe et réactif conçu avec une esthétique monospace/développeur et une palette de couleurs neutres chaudes, adapté aux sites Web de conseil/services professionnels. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Un méga menu complexe, sur le thème du cyberpunk, pour les sites Web d’alimentation/restaurant, avec des accents néon, des arrière-plans sombres, une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

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