Hero sections

<!-- This example requires Tailwind CSS v2.0+ -->
<div class="grid grid-cols-2 gap-10 py-10">
 <div class="col-span-2 px-10">
    <a href="#">
        <div class="w-full"><img class="object-cover w-full bg-blue-300" src="" alt=""></div>
        <h3 class="font-semibold text-xl">How to build a blutui site</h3>
        <p class="text-gray-800 font-light">From Blutui</p>
    </a>
 </div>
 <div class="sm:col-span-1 col-span-2 px-10">
    <a href="#">
        <div class="w-full"><img class="object-cover w-full bg-green-300" src="" alt=""></div>
        <h3 class="font-semibold text-xl">Using canvas for your advantage</h3>
        <p class="text-gray-800 font-light">From Blutui</p>
    </a>
 </div>
 <div class="sm:col-span-1 col-span-2 px-10">
    <a href="#">
        <div class="w-full"><img class="object-cover w-full bg-red-300" src="" alt=""></div>
        <h3 class="font-semibold text-xl">Using CMS function to render you content</h3>
        <p class="text-gray-800 font-light">From Blutui</p>
    </a>
 </div>
</div>
<div class="grid sm:grid-rows-2 sm:grid-flow-col grid-col-3 gap-10 ">
 <div class="sm:row-span-2 sm:col-span-1 col-span-3 bg-gray-800 text-white p-5">
    <a href="#" class="pb-4">
        <div class="w-full"><img class="object-cover w-full bg-blue-300" src="" alt=""></div>
        <h3 class="font-semibold text-xl">How to build a blutui site</h3>
        <p class="text-gray-100 font-light">From Blutui</p>
    </a>
 </div>
 <div class="sm:col-span-2 col-span-3 bg-gray-800 text-white p-5">
    <a href="#">
        <div class="w-full"><img class="object-cover w-full bg-green-300" src="" alt=""></div>
        <h3 class="font-semibold text-xl">Using canvas for your advantage</h3>
        <p class="text-gray-100 font-light">From Blutui</p>
    </a>
 </div>
 <div class="sm:col-span-1 col-span-3 bg-gray-800 text-white p-5">
    <a href="#">
        <div class="w-full"><img class="object-cover w-full bg-red-300" src="" alt=""></div>
        <h3 class="font-semibold text-xl">Using CMS function to render you content</h3>
        <p class="text-gray-100 font-light">From Blutui</p>
    </a>
 </div>
 <div class="sm:col-span-1 col-span-3 bg-gray-800 text-white p-5">
    <a href="#">
        <div class="w-full"><img class="object-cover w-full bg-red-300" src="" alt=""></div>
        <h3 class="font-semibold text-xl">Using CMS function to render you content</h3>
        <p class="text-gray-100 font-light">From Blutui</p>
    </a>
 </div>
</div>