<div class="mb-2 bg-blue-600 text-white">
  <div class="flex flex-col md:flex-row px-4 font-medium items-center tracking-wide">
    <div class="flex md:mt-0 mt-4 items-center">
        <svg viewBox="0 0 32 32" stroke="currentColor" stroke-width="4" stroke-linecap="round" class="w-8 h-8">
          <path
            d="M28 11v11M22 3v26M16 11v11M10 3v26M4 11v11"
            transform="translate(16, 16) rotate(45) scale(.75, 1) translate(-16, -16)"
          />
        </svg>
      <a class="md:my-4 md:mr-4 px-2 rounded text-2xl" href="#">Acme</a>
    </div>
    <ul class="flex flex-col md:flex-row mx-auto md:mt-0 mt-2 md:mb-0 mb-2 md:ml-auto list-disc md:list-none">
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          Features
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          Pricing
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          FAQ
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          Contact
        </a>
      </li>
    </ul>
    <button class="absolute top-0 right-0 m-5 px-1 md:hidden rounded hover:text-gray-200 focus:text-gray-200 text-white">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
        <line x1="3" y1="12" x2="21" y2="12" />
        <line x1="3" y1="6" x2="21" y2="6" />
        <line x1="3" y1="18" x2="21" y2="18" />
      </svg>
    </button>
  </div>
</div>

<div class="mb-2 bg-blue-600 text-white">
  <div class="flex flex-col md:flex-row px-4 font-medium items-center tracking-wide">
    <div class="flex md:mt-0 mt-4 items-center">
        <svg viewBox="0 0 32 32" stroke="currentColor" stroke-width="4" stroke-linecap="round" class="w-8 h-8">
          <path
            d="M28 11v11M22 3v26M16 11v11M10 3v26M4 11v11"
            transform="translate(16, 16) rotate(45) scale(.75, 1) translate(-16, -16)"
          />
        </svg>
      <a class="md:my-4 md:mr-4 px-2 rounded text-2xl" href="#">Acme</a>
    </div>
    <ul class="flex flex-col md:flex-row mx-auto md:mt-0 mt-2 list-disc md:list-none">
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          Features
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          Pricing
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          FAQ
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          Contact
        </a>
      </li>
    </ul>
    <div class="flex">
      <a class="md:my-4 mt-2 mr-2 md:mr-4 mb-4 px-4 py-2 hover:bg-blue-700 border-2 border-white rounded shadow-lg" href="#">
        Sign In
      </a>
      <a class="md:my-4 mt-2 mb-4 px-4 py-2 hover:bg-gray-200 bg-white border-2 hover:border-gray-200 border-white rounded shadow-lg text-blue-700" href="#">
        Sign Up
      </a>
    </div>
    <button class="absolute top-0 right-0 m-5 px-1 md:hidden rounded hover:text-gray-200 focus:text-gray-200 text-white">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
        <line x1="3" y1="12" x2="21" y2="12" />
        <line x1="3" y1="6" x2="21" y2="6" />
        <line x1="3" y1="18" x2="21" y2="18" />
      </svg>
    </button>
  </div>
</div>

<div class="mb-2 bg-blue-600 text-white">
  <div class="flex flex-col md:flex-row px-4 font-medium items-center tracking-wide">
    <div class="flex md:mt-0 mt-4 items-center">
        <svg viewBox="0 0 32 32" stroke="currentColor" stroke-width="4" stroke-linecap="round" class="w-8 h-8">
          <path
            d="M28 11v11M22 3v26M16 11v11M10 3v26M4 11v11"
            transform="translate(16, 16) rotate(45) scale(.75, 1) translate(-16, -16)"
          />
        </svg>
      <a class="md:my-4 md:mr-4 px-2 rounded text-2xl" href="#">Acme</a>
    </div>
    <ul class="flex flex-col md:flex-row mx-auto md:mt-0 mt-2 list-disc md:list-none">
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          Features
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          Pricing
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          FAQ
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          Contact
        </a>
      </li>
    </ul>
    <div class="flex">
      <label class="flex md:my-4 mt-2 mb-4 items-center relative">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 absolute text-gray-500 ml-2">
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
        <input class="py-2 pr-4 pl-8 bg-gray-300 focus:bg-white focus:border-transparent form-input rounded shadow-lg focus:shadow-none text-gray-900 w-56" type="text" placeholder="Search...">
      </label>
    </div>
    <button class="absolute top-0 right-0 m-5 px-1 md:hidden rounded hover:text-gray-200 focus:text-gray-200 text-white">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
        <line x1="3" y1="12" x2="21" y2="12" />
        <line x1="3" y1="6" x2="21" y2="6" />
        <line x1="3" y1="18" x2="21" y2="18" />
      </svg>
    </button>
  </div>
</div>

<div class="mb-2 bg-white shadow text-gray-800">
  <div class="flex flex-col md:flex-row px-4 font-medium items-center tracking-wide">
    <div class="flex md:mt-0 mt-4 items-center">
        <svg viewBox="0 0 32 32" stroke="currentColor" stroke-width="4" stroke-linecap="round" class="w-8 h-8">
          <path
            d="M28 11v11M22 3v26M16 11v11M10 3v26M4 11v11"
            transform="translate(16, 16) rotate(45) scale(.75, 1) translate(-16, -16)"
          />
        </svg>
      <a class="md:my-4 md:mr-4 px-2 rounded text-2xl" href="#">Acme</a>
    </div>
    <ul class="flex flex-col md:flex-row mx-auto md:mt-0 mt-2 md:mb-0 mb-2 md:ml-auto list-disc md:list-none">
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          Features
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          Pricing
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          FAQ
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          Contact
        </a>
      </li>
    </ul>
    <button class="absolute top-0 right-0 m-5 px-1 md:hidden rounded hover:text-gray-700 focus:text-gray-700 text-gray-900">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
        <line x1="3" y1="12" x2="21" y2="12" />
        <line x1="3" y1="6" x2="21" y2="6" />
        <line x1="3" y1="18" x2="21" y2="18" />
      </svg>
    </button>
  </div>
</div>

<div class="mb-2 bg-white shadow text-gray-800">
  <div class="flex flex-col md:flex-row px-4 font-medium items-center tracking-wide">
    <div class="flex md:mt-0 mt-4 items-center">
        <svg viewBox="0 0 32 32" stroke="currentColor" stroke-width="4" stroke-linecap="round" class="w-8 h-8">
          <path
            d="M28 11v11M22 3v26M16 11v11M10 3v26M4 11v11"
            transform="translate(16, 16) rotate(45) scale(.75, 1) translate(-16, -16)"
          />
        </svg>
      <a class="md:my-4 md:mr-4 px-2 rounded text-2xl" href="#">Acme</a>
    </div>
    <ul class="flex flex-col md:flex-row mx-auto md:mt-0 mt-2 list-disc md:list-none">
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          Features
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          Pricing
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          FAQ
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          Contact
        </a>
      </li>
    </ul>
    <div class="flex">
      <a class="md:my-4 mt-2 mr-2 md:mr-4 mb-4 px-4 py-2 hover:bg-gray-200 border-2 border-blue-600 rounded text-blue-700" href="#">
        Sign In
      </a>
      <a class="md:my-4 mt-2 mb-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 border-2 border-blue-600 hover:border-blue-700 rounded text-white" href="#">
        Sign Up
      </a>
    </div>
    <button class="absolute top-0 right-0 m-5 px-1 md:hidden rounded hover:text-gray-700 focus:text-gray-700 text-gray-900">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
        <line x1="3" y1="12" x2="21" y2="12" />
        <line x1="3" y1="6" x2="21" y2="6" />
        <line x1="3" y1="18" x2="21" y2="18" />
      </svg>
    </button>
  </div>
</div>

<div class="mb-2 bg-white shadow text-gray-800">
  <div class="flex flex-col md:flex-row px-4 font-medium items-center tracking-wide">
    <div class="flex md:mt-0 mt-4 items-center">
        <svg viewBox="0 0 32 32" stroke="currentColor" stroke-width="4" stroke-linecap="round" class="w-8 h-8">
          <path
            d="M28 11v11M22 3v26M16 11v11M10 3v26M4 11v11"
            transform="translate(16, 16) rotate(45) scale(.75, 1) translate(-16, -16)"
          />
        </svg>
      <a class="md:my-4 md:mr-4 px-2 rounded text-2xl" href="#">Acme</a>
    </div>
    <ul class="flex flex-col md:flex-row mx-auto md:mt-0 mt-2 list-disc md:list-none">
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          Features
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          Pricing
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          FAQ
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          Contact
        </a>
      </li>
    </ul>
    <div class="flex">
      <label class="flex md:my-4 mt-2 mb-4 items-center relative">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 absolute text-gray-500 ml-2">
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
        <input class="py-2 pr-4 pl-8 bg-gray-300 focus:bg-white border-2 focus:border-blue-600 form-input rounded focus:shadow-none text-gray-900 w-56" type="text" placeholder="Search...">
      </label>
    </div>
    <button class="absolute top-0 right-0 m-5 px-1 md:hidden rounded hover:text-gray-700 focus:text-gray-700 text-gray-900">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
        <line x1="3" y1="12" x2="21" y2="12" />
        <line x1="3" y1="6" x2="21" y2="6" />
        <line x1="3" y1="18" x2="21" y2="18" />
      </svg>
    </button>
  </div>
</div>

<div class="mb-2 bg-gray-100 shadow text-gray-800">
  <div class="flex flex-col md:flex-row px-4 font-medium items-center tracking-wide">
    <div class="flex md:mt-0 mt-4 items-center">
        <svg viewBox="0 0 32 32" stroke="currentColor" stroke-width="4" stroke-linecap="round" class="w-8 h-8">
          <path
            d="M28 11v11M22 3v26M16 11v11M10 3v26M4 11v11"
            transform="translate(16, 16) rotate(45) scale(.75, 1) translate(-16, -16)"
          />
        </svg>
      <a class="md:my-4 md:mr-4 px-2 rounded text-2xl" href="#">Acme</a>
    </div>
    <ul class="flex flex-col md:flex-row mx-auto md:mt-0 mt-2 md:mb-0 mb-2 md:ml-auto list-disc md:list-none">
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          Features
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          Pricing
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          FAQ
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          Contact
        </a>
      </li>
    </ul>
    <button class="absolute top-0 right-0 m-5 px-1 md:hidden rounded hover:text-gray-700 focus:text-gray-700 text-gray-900">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
        <line x1="3" y1="12" x2="21" y2="12" />
        <line x1="3" y1="6" x2="21" y2="6" />
        <line x1="3" y1="18" x2="21" y2="18" />
      </svg>
    </button>
  </div>
</div>

<div class="mb-2 bg-gray-100 shadow text-gray-800">
  <div class="flex flex-col md:flex-row px-4 font-medium items-center tracking-wide">
    <div class="flex md:mt-0 mt-4 items-center">
        <svg viewBox="0 0 32 32" stroke="currentColor" stroke-width="4" stroke-linecap="round" class="w-8 h-8">
          <path
            d="M28 11v11M22 3v26M16 11v11M10 3v26M4 11v11"
            transform="translate(16, 16) rotate(45) scale(.75, 1) translate(-16, -16)"
          />
        </svg>
      <a class="md:my-4 md:mr-4 px-2 rounded text-2xl" href="#">Acme</a>
    </div>
    <ul class="flex flex-col md:flex-row mx-auto md:mt-0 mt-2 list-disc md:list-none">
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          Features
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          Pricing
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          FAQ
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          Contact
        </a>
      </li>
    </ul>
    <div class="flex">
      <a class="md:my-4 mt-2 mr-2 md:mr-4 mb-4 px-4 py-2 hover:bg-gray-200 border-2 border-blue-600 rounded text-blue-700" href="#">
        Sign In
      </a>
      <a class="md:my-4 mt-2 mb-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 border-2 border-blue-600 hover:border-blue-700 rounded text-white" href="#">
        Sign Up
      </a>
    </div>
    <button class="absolute top-0 right-0 m-5 px-1 md:hidden rounded hover:text-gray-700 focus:text-gray-700 text-gray-900">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
        <line x1="3" y1="12" x2="21" y2="12" />
        <line x1="3" y1="6" x2="21" y2="6" />
        <line x1="3" y1="18" x2="21" y2="18" />
      </svg>
    </button>
  </div>
</div>

<div class="mb-2 bg-gray-100 shadow text-gray-800">
  <div class="flex flex-col md:flex-row px-4 font-medium items-center tracking-wide">
    <div class="flex md:mt-0 mt-4 items-center">
        <svg viewBox="0 0 32 32" stroke="currentColor" stroke-width="4" stroke-linecap="round" class="w-8 h-8">
          <path
            d="M28 11v11M22 3v26M16 11v11M10 3v26M4 11v11"
            transform="translate(16, 16) rotate(45) scale(.75, 1) translate(-16, -16)"
          />
        </svg>
      <a class="md:my-4 md:mr-4 px-2 rounded text-2xl" href="#">Acme</a>
    </div>
    <ul class="flex flex-col md:flex-row mx-auto md:mt-0 mt-2 list-disc md:list-none">
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          Features
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          Pricing
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          FAQ
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-700 focus:text-gray-700 text-gray-900" href="#">
          Contact
        </a>
      </li>
    </ul>
    <div class="flex">
      <label class="flex md:my-4 mt-2 mb-4 items-center relative">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 absolute text-gray-500 ml-2">
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
        <input class="py-2 pr-4 pl-8 bg-gray-300 focus:bg-white border-2 focus:border-blue-600 form-input rounded focus:shadow-none text-gray-900 w-56" type="text" placeholder="Search...">
      </label>
    </div>
    <button class="absolute top-0 right-0 m-5 px-1 md:hidden rounded hover:text-gray-700 focus:text-gray-700 text-gray-900">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
        <line x1="3" y1="12" x2="21" y2="12" />
        <line x1="3" y1="6" x2="21" y2="6" />
        <line x1="3" y1="18" x2="21" y2="18" />
      </svg>
    </button>
  </div>
</div>

<div class="mb-2 bg-gray-800 text-white">
  <div class="flex flex-col md:flex-row px-4 font-medium items-center tracking-wide">
    <div class="flex md:mt-0 mt-4 items-center">
        <svg viewBox="0 0 32 32" stroke="currentColor" stroke-width="4" stroke-linecap="round" class="w-8 h-8">
          <path
            d="M28 11v11M22 3v26M16 11v11M10 3v26M4 11v11"
            transform="translate(16, 16) rotate(45) scale(.75, 1) translate(-16, -16)"
          />
        </svg>
      <a class="md:my-4 md:mr-4 px-2 rounded text-2xl" href="#">Acme</a>
    </div>
    <ul class="flex flex-col md:flex-row mx-auto md:mt-0 mt-2 md:mb-0 mb-2 md:ml-auto list-disc md:list-none">
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          Features
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          Pricing
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          FAQ
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          Contact
        </a>
      </li>
    </ul>
    <button class="absolute top-0 right-0 m-5 px-1 md:hidden rounded hover:text-gray-200 focus:text-gray-200 text-white">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
        <line x1="3" y1="12" x2="21" y2="12" />
        <line x1="3" y1="6" x2="21" y2="6" />
        <line x1="3" y1="18" x2="21" y2="18" />
      </svg>
    </button>
  </div>
</div>

<div class="mb-2 bg-gray-800 text-white">
  <div class="flex flex-col md:flex-row px-4 font-medium items-center tracking-wide">
    <div class="flex md:mt-0 mt-4 items-center">
        <svg viewBox="0 0 32 32" stroke="currentColor" stroke-width="4" stroke-linecap="round" class="w-8 h-8">
          <path
            d="M28 11v11M22 3v26M16 11v11M10 3v26M4 11v11"
            transform="translate(16, 16) rotate(45) scale(.75, 1) translate(-16, -16)"
          />
        </svg>
      <a class="md:my-4 md:mr-4 px-2 rounded text-2xl" href="#">Acme</a>
    </div>
    <ul class="flex flex-col md:flex-row mx-auto md:mt-0 mt-2 list-disc md:list-none">
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          Features
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          Pricing
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          FAQ
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          Contact
        </a>
      </li>
    </ul>
    <div class="flex">
      <a class="md:my-4 mt-2 mr-2 md:mr-4 mb-4 px-4 py-2 bg-gray-200 hover:bg-gray-300 border-2 border-gray-200 hover:border-gray-300 rounded shadow-lg text-gray-800" href="#">
        Sign In
      </a>
      <a class="md:my-4 mt-2 mb-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 border-2 border-blue-600 hover:border-blue-700 rounded shadow-lg text-white" href="#">
        Sign Up
      </a>
    </div>
    <button class="absolute top-0 right-0 m-5 px-1 md:hidden rounded hover:text-gray-200 focus:text-gray-200 text-white">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
        <line x1="3" y1="12" x2="21" y2="12" />
        <line x1="3" y1="6" x2="21" y2="6" />
        <line x1="3" y1="18" x2="21" y2="18" />
      </svg>
    </button>
  </div>
</div>

<div class="mb-2 bg-gray-800 text-white">
  <div class="flex flex-col md:flex-row px-4 font-medium items-center tracking-wide">
    <div class="flex md:mt-0 mt-4 items-center">
        <svg viewBox="0 0 32 32" stroke="currentColor" stroke-width="4" stroke-linecap="round" class="w-8 h-8">
          <path
            d="M28 11v11M22 3v26M16 11v11M10 3v26M4 11v11"
            transform="translate(16, 16) rotate(45) scale(.75, 1) translate(-16, -16)"
          />
        </svg>
      <a class="md:my-4 md:mr-4 px-2 rounded text-2xl" href="#">Acme</a>
    </div>
    <ul class="flex flex-col md:flex-row mx-auto md:mt-0 mt-2 list-disc md:list-none">
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          Features
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          Pricing
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          FAQ
        </a>
      </li>
      <li class="md:mx-3 md:py-6 pb-2">
        <a class="hover:text-gray-200 focus:text-gray-200 text-white" href="#">
          Contact
        </a>
      </li>
    </ul>
    <div class="flex">
      <label class="flex md:my-4 mt-2 mb-4 items-center relative">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 absolute text-gray-500 ml-2">
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
        <input class="py-2 pr-4 pl-8 bg-gray-700 focus:bg-gray-800 border-2 border-transparent focus:border-white form-input rounded shadow-lg focus:shadow-none text-gray-100 w-56" type="text" placeholder="Search...">
      </label>
    </div>
    <button class="absolute top-0 right-0 m-5 px-1 md:hidden rounded hover:text-gray-200 focus:text-gray-200 text-white">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
        <line x1="3" y1="12" x2="21" y2="12" />
        <line x1="3" y1="6" x2="21" y2="6" />
        <line x1="3" y1="18" x2="21" y2="18" />
      </svg>
    </button>
  </div>
</div>