Mega Menu Header

<nav class="bg-white border-b border-gray-200 px-6 py-3 relative">
  <div class="max-w-7xl mx-auto flex items-center justify-between">
    <a href="#" class="text-xl font-bold text-gray-900">Brand</a>
    <div class="hidden md:flex items-center gap-6">
      <div class="group relative">
        <button class="text-gray-600 hover:text-gray-900 text-sm font-medium flex items-center gap-1">Products <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></button>
        <div class="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-[600px] bg-white rounded-xl shadow-xl border border-gray-100 p-6 grid grid-cols-3 gap-6 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
          <div>
            <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wide mb-3">Platform</h4>
            <a href="#" class="block text-sm text-gray-700 hover:text-indigo-600 py-1">Analytics</a>
            <a href="#" class="block text-sm text-gray-700 hover:text-indigo-600 py-1">Automation</a>
            <a href="#" class="block text-sm text-gray-700 hover:text-indigo-600 py-1">Integrations</a>
          </div>
          <div>
            <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wide mb-3">Solutions</h4>
            <a href="#" class="block text-sm text-gray-700 hover:text-indigo-600 py-1">Enterprise</a>
            <a href="#" class="block text-sm text-gray-700 hover:text-indigo-600 py-1">Startups</a>
            <a href="#" class="block text-sm text-gray-700 hover:text-indigo-600 py-1">Agencies</a>
          </div>
          <div>
            <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wide mb-3">Resources</h4>
            <a href="#" class="block text-sm text-gray-700 hover:text-indigo-600 py-1">Documentation</a>
            <a href="#" class="block text-sm text-gray-700 hover:text-indigo-600 py-1">Blog</a>
            <a href="#" class="block text-sm text-gray-700 hover:text-indigo-600 py-1">Support</a>
          </div>
        </div>
      </div>
      <a href="#" class="text-gray-600 hover:text-gray-900 text-sm font-medium">Pricing</a>
      <a href="#" class="text-gray-600 hover:text-gray-900 text-sm font-medium">About</a>
    </div>
  </div>
</nav>