Hero's 13

            
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-6 pb-20">
  <div class="max-w-screen-xl mx-auto 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="grid grid-cols-2 gap-8 max-w-screen-xl mx-auto mt-12 ">
    
    <div class="col-span-2 md:col-span-1 md:pt-8">
      <h2 class="text-2xl sm:text-3xl md:text-4xl xl:text-5xl text-gray-700 font-medium mb-4 lg:mb-6">This is a great article title about, this 2021 must read</h2>
      <p class="text-lg">One morning, when Gregor Samsa woke from troubled dreams, he found himseld in his bed into a horrible vermin. He lay on his armour-like back.</p>
      <p class="mt-4 text-lg">The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.</p>
      <a href="#" class="inline-block  bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6">Order now</a>
    </div>
    
    <div class="col-span-2 md:col-span-1 space-y-2 md:flex md:flex-col"> 
      
      <a href="#" class="block md:flex md:flex-row items-center md:space-x-6 bg-gray-200 p-4 lg:p-8 rounded-lg">
        <span class="w-10 h-10 text-gray-600 hidden md:block">
          <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="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
          </svg>
        </span>
        <div class="md:self-center md:flex-1">
          <span class="text-xl font-semibold text-gray-700 block">Doing your own business</span>
          <p class="mt-2 text-lg">Doing business like this takes much more effort</p>
        </div>
        <span class="w-6 hidden md:inline-block">
          <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="M9 5l7 7-7 7" />
          </svg>
        </span>
      </a>
  
      <a href="#" class="block md:flex md:flex-row items-center md:space-x-6 bg-gray-200 p-4 lg:p-8 rounded-lg">
        <span class="w-10 h-10 text-gray-600 hidden md:block">
          <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="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
          </svg>
        </span>
        <div class="md:self-center md:flex-1">
          <span class="text-xl font-semibold text-gray-700 block">Shut his eyes so</span>
          <p class="mt-2 text-lg">He must have tried it a hundred times, shut his e</p>
        </div>
        <span class="w-6 hidden md:inline-block">
          <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="M9 5l7 7-7 7" />
          </svg>
        </span>
      </a>
  
      <a href="#" class="block md:flex md:flex-row items-center md:space-x-6 bg-gray-200 p-4 lg:p-8 rounded-lg">
        <span class="w-10 h-10 text-gray-600 hidden md:block">
          <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
          </svg>
        </span>
        <div class="md:self-center md:flex-1">
          <span class="text-xl font-semibold text-gray-700 block">Other travelling salesmen</span>
          <p class="mt-2 text-lg">You've got to get enough sleep. Other travelling salesmen</p>
        </div>
        <span class="w-6 hidden md:inline-block">
          <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="M9 5l7 7-7 7" />
          </svg>
        </span>
      </a>
    </div>
  </div>
</div>