<div class="hidden md:grid h-24 md:grid-cols-[1fr,auto,1fr]">
  <div class="flex items-center 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 border border-red-600">
    <img
      src="https://via.placeholder.com/200x100"
      alt="Logo"
      class=""
    />
  </div>
  <div class="flex items-center 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"
      >Menuitem 3</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>