Content 05

            
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
  <div class="grid grid-cols-2 gap-8 max-w-screen-xl mx-auto ">
    
    <div class="col-span-2 lg:col-span-1">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal.svg"alt="image placeholder" class="mb-6 lg:mb-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>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back.</p>
      <p class="mt-4">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 mt-5 font-semibold">Read more ></a>
    </div>
    
    <div class="col-span-2 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="flex flex-col lg:flex-row items-start space-y-6 lg:space-y-0 lg:space-x-10 bg-gray-200 p-4 rounded-lg">
        <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="Image placeholder" class="rounded-xl w-24 lg:w-40">
        <div class="self-center">
          <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, and on top of that there's the curse of travelling.</p>
          <a href="#" class="inline-block mt-2">Read more</a>
        </div>
      </div>
  
      <div class="flex flex-col lg:flex-row items-start space-y-6 lg:space-y-0 lg:space-x-10 bg-gray-200 p-4 rounded-lg">
        <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="Image placeholder" class="rounded-xl w-24 lg:w-40">
        <div class="self-center">
          <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 at the floundering legs, and only stopped when.</p>
          <a href="#" class="inline-block mt-2">Read more</a>
        </div>
      </div>
  
      <div class="flex flex-col lg:flex-row items-start space-y-6 lg:space-y-0 lg:space-x-10 bg-gray-200 p-4 rounded-lg">
        <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="Image placeholder" class="rounded-xl w-24 lg:w-40">
        <div class="self-center">
          <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. For instance, whenever I go back to the guest.</p>
          <a href="#" class="inline-block mt-2">Read more</a>
        </div>
      </div>

    </div>
  </div>
</div>