Grid Layouts 09

            
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12">
  <div class="max-w-screen-xl mx-auto grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-x-8">
    
    <div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-2 lg:col-span-1 flex flex-col justify-end">
      <h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
      <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
    </div>

    <div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-2 flex flex-col justify-end">
      <h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
      <p>Doing business like this takes much more effort than doing your own business at home, and on top.</p>
    </div>

    <div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-2 lg:col-span-1 flex flex-col justify-end">
      <h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
      <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
    </div>

    <div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-2 row-span-1 md:row-span-2 flex flex-col justify-end">
      <h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
      <p>Doing business like this takes much more effort than doing your own business at home, and on top.</p>
    </div>

    <div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-1 flex flex-col justify-end">
      <h3 class="font-semibold text-lg mb-2">But who knows, would do it</h3>
      <p>You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance.</p>
    </div>

    <div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-1 flex flex-col justify-end">
      <h3 class="font-semibold text-lg mb-2">He felt a slight up on his bell</h3>
      <p>He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the.</p>
    </div>
    <div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-1 flex flex-col justify-end">
      <h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
      <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
    </div>

    <div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-1 flex flex-col justify-end">
      <h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
      <p>Doing business like this takes much more effort than doing your own business at home, and on top.</p>
    </div>

    <div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-2 flex flex-col justify-end">
      <h3 class="font-semibold text-lg mb-2">But who knows, would do it</h3>
      <p>You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance.</p>
    </div>

    <div class="bg-gray-200 px-6 pt-20 lg:pt-32 xl:pt-48 pb-6 rounded col-span-1 md:col-span-2 flex flex-col justify-end">
      <h3 class="font-semibold text-lg mb-2">He felt a slight up on his bell</h3>
      <p>He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the.</p>
    </div>
  </div>
</div>