<header class="bg-white shadow">
  <div class="container mx-auto px-4 py-6 flex justify-between items-center">
      <div class="text-2xl font-bold text-gray-800">My Website</div>
      <button id="menuToggle" class="md:hidden text-gray-800 focus:outline-none">
          <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 12h16m-7 6h7" />
          </svg>
      </button>
      <nav id="mobileNav" class="hidden md:flex md:space-x-4">
          <a href="#" class="text-gray-800 hover:text-gray-600">Home</a>
          <a href="#" class="text-gray-800 hover:text-gray-600">About</a>
          <a href="#" class="text-gray-800 hover:text-gray-600">Services</a>
          <a href="#" class="text-gray-800 hover:text-gray-600">Contact</a>
      </nav>
  </div>
  <nav id="mobileMenu" class="md:hidden overflow-hidden max-h-0 transition-height ease-in-out duration-300">
      <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">Home</a>
      <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">About</a>
      <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">Services</a>
      <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-200">Contact</a>
  </nav>
</header>