Grid Layouts 06

            
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-4 pb-20">
  <div class="md:grid md:grid-cols-2 md:gap-12 max-w-screen-xl mx-auto mt-12 space-y-8 md:space-y-0">
    
    <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-48">
      <div class="self-center">
        <span class="text-xl font-semibold text-gray-700 block">Troubled dreams</span>
        <p class="mt-3">One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed in his bed into a horrible vermin.</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-48">
      <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-48">
      <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-48">
      <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>