Hero's 08

            
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4 lg:py-5 ">
  <div class="max-w-screen-xl mx-auto ">
    <div class="flex justify-between items-center relative">
      <a href="#" class="block flex-shrink-0">
        <img class="h-9" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
      </a>
      <div class="flex justify-between space-x-4 md:space-x-10 flex-shrink-1 md:flex-grow-0">
        <nav
          class="hidden md:flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-8 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto  md:relative bg-gray-200 md:bg-transparent">
          <a href="#" class="hover:opacity-70">Home</a>
          <a href="#" class="hover:opacity-70">Services</a>
          <a href="#" class="hover:opacity-70">Pricing</a>
          <a href="#" class="hover:opacity-70">Blog</a>
          <a href="#" class="hover:opacity-70">Contact</a>
        </nav>
        <button class="w-9 bg-gray-600 p-2 rounded-md text-gray-200 block md:hidden">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd"
              d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
              clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>

    <div class="flex flex-col md:flex-row py-4 lg:py-8 space-x-6">
      <div class="flex space-x-2 items-center">
        <span class="w-6">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
          </svg>
        </span>
        <span>
          Order before 22:00, delivered tomorrow
        </span>
      </div>
      <div class="hidden lg:flex space-x-2 items-center">
        <span class="w-6">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
          </svg>
        </span>
        <span>
          Always free returns
        </span>
      </div>
      <div class="hidden lg:flex space-x-2 items-center">
        <span class="w-6">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
          </svg>
        </span>
        <span>
          Supports after pay
        </span>
      </div>
    </div>
    
    <div class="grid grid-cols-3 gap-8">
      <div class="col-span-3 lg:col-span-2">
        <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal.svg"alt="image placeholder" class="min-h-full object-cover">
      </div>
      <div class="col-span-3 lg:col-span-1 lg:space-y-2 md:flex lg:flex-col divide-y-2 md:divide-y-0 md:divide-x-2 lg:divide-x-0 divide-gray-300"> 
        <div class="bg-gray-200 p-4 lg:rounded-lg flex-1">
          <span class="text-xl font-semibold text-gray-700 block">Doing your own business</span>
          <p class="mt-3">Doing business like this takes much more effort than doing your own business at home.</p>
          <a href="#" class="inline-block mt-2">Read more</a>
        </div>
        <div class="bg-gray-200 p-4 lg:rounded-lg flex-1">
          <span class="text-xl font-semibold text-gray-700 block">Shut his eyes so</span>
          <p class="mt-3">He must have tried it a hundred times, shut his eyes so that he wouldn't have to look.</p>
          <a href="#" class="inline-block mt-2">Read more</a>
        </div>
        <div class="bg-gray-200 p-4 lg:rounded-lg flex-1">
          <span class="text-xl font-semibold text-gray-700 block">Other travelling salesmen</span>
          <p class="mt-3">You've got to get enough sleep. Other travelling salesmen live a life of luxury.</p>
          <a href="#" class="inline-block mt-2">Read more</a>
        </div>
      </div>
    </div>

    <div class="flex flex-col md:flex-row justify-center py-4 lg:py-8 space-y-3 md:space-y-0 md:space-x-6">
      <div class="flex space-x-2 items-center">
        <span class="w-6">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </span>
        <span>
          Happy customers 8.5
        </span>
      </div>
      <div class="flex space-x-2 items-center">
        <span class="w-6">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
          </svg>
        </span>
        <span>
          24/7 customer service
        </span>
      </div>
      <div class="flex space-x-2 items-center">
        <span class="w-6">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
          </svg>
        </span>
        <span>
          Talk to real experts
        </span>
      </div>
    </div>

  </div>
</div>