Brutalist E-commerce Mega Menu

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

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

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