Navbar With Dropdown

                    <nav class="bg-white shadow-sm px-4 py-3">
  <div class="max-w-6xl mx-auto flex items-center justify-between">
    <div class="flex items-center">
      <a href="#" class="text-xl font-semibold text-gray-800">
        Brand Name
      </a>
    </div>
    
    <div class="hidden md:flex items-center space-x-4">
      <a href="#" class="px-3 py-2 text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md">Home</a>
      
      <!-- Products Dropdown -->
      <div class="relative group">
        <button class="px-3 py-2 text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md inline-flex items-center">
          <span>Products</span>
          <svg class="ml-1 w-5 h-5" 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 class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-10">
          <div class="py-1">
            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Product 1</a>
            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Product 2</a>
            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Product 3</a>
          </div>
        </div>
      </div>
      
      <!-- Services Dropdown -->
      <div class="relative group">
        <button class="px-3 py-2 text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md inline-flex items-center">
          <span>Services</span>
          <svg class="ml-1 w-5 h-5" 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 class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-10">
          <div class="py-1">
            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Consulting</a>
            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Development</a>
            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Support</a>
          </div>
        </div>
      </div>
      
      <a href="#" class="px-3 py-2 text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md">About</a>
      <a href="#" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Sign Up</a>
    </div>
    
    <div class="md:hidden">
      <button class="p-2 rounded-md text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-300">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>