<div
  class="hidden md:flex md:items-center md:justify-between bg-white mt-8"
>
  <div class="flex items-center grow justify-between">
    <a
      href="#"
      class="block text-gray-700 hover:text-gray-900 font-semibold mx-4">Home</a
    >
    <a
      href="#"
      class="block text-gray-700 hover:text-gray-900 font-semibold mr-4"
      >About</a
    >
    <a
      href="#"
      class="block text-gray-700 hover:text-gray-900 font-semibold mr-4">Blog</a
    >
    <a
      href="#"
      class="block text-gray-700 hover:text-gray-900 font-semibold mr-4"
      >Contact</a
    >
  </div>
  <div class="flex items-center">
    <img src="https://via.placeholder.com/200x100" alt="Logo" class="" />
  </div>
  <div class="flex items-center grow justify-between">
    <a
      href="#"
      class="block text-gray-700 hover:text-gray-900 font-semibold mx-4">Home</a
    >
    <a
      href="#"
      class="block text-gray-700 hover:text-gray-900 font-semibold mr-4"
      >About</a
    >
    <a
      href="#"
      class="block text-gray-700 hover:text-gray-900 font-semibold mr-4">Blog</a
    >
    <a
      href="#"
      class="block text-gray-700 hover:text-gray-900 font-semibold mr-4"
      >Contact</a
    >
  </div>
</div>