Blogs
Three Columns Grid
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-10">
<article>
<div class="py-5">
<span class="bg-blue-200 text-blue-800 px-3 py-1 rounded-full text-sm">Technical</span>
<h5 class="mt-3 font-semibold text-xl">Lorem ipsum dolor sit amet</h5>
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div class="py-5 flex">
<img class="h-10 w-10 object-cover rounded-full mr-3"
src="https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"
alt="">
<div>
<h6>Sam Doe</h6>
<p class="text-gray-500 text-sm">Jan 1, 2022 - 3 min read</p>
</div>
</div>
</article>
<article>
<div class="py-5">
<span class="bg-green-200 text-green-800 px-3 py-1 rounded-full text-sm">Nature</span>
<h5 class="mt-3 font-semibold text-xl">Lorem ipsum dolor sit amet</h5>
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div class="py-5 flex">
<img class="h-10 w-10 object-cover rounded-full mr-3"
src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=344&q=80"
alt="">
<div>
<h6>John Roger</h6>
<p class="text-gray-500 text-sm">Mar 19, 2022 - 6 min read</p>
</div>
</div>
</article>
<article>
<div class="py-5">
<span class="bg-red-200 text-red-800 px-3 py-1 rounded-full text-sm">Workspace</span>
<h5 class="mt-3 font-semibold text-xl">Lorem ipsum dolor sit amet</h5>
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div class="py-5 flex">
<img class="h-10 w-10 object-cover rounded-full mr-3"
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=750&q=80"
alt="">
<div>
<h6>Anny Parker</h6>
<p class="text-gray-500 text-sm">Sep 13, 2022 - 7 min read</p>
</div>
</div>
</article>
</section>Three Columns Card
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-10 bg-gray-100">
<article class="bg-white rounded-2xl shadow-sm relative">
<img class="rounded-t-2xl h-60 w-full object-cover"
src="https://images.pexels.com/photos/1170412/pexels-photo-1170412.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="img">
<span class="absolute top-5 left-5 bg-blue-200 text-blue-800 px-3 py-1 rounded-full text-sm">Technical</span>
<div class="p-5">
<h5 class="font-semibold text-xl">Lorem ipsum dolor sit amet</h5>
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div class="p-5 flex">
<img class="h-10 w-10 object-cover rounded-full mr-3"
src="https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"
alt="">
<div>
<h6>Sam Doe</h6>
<p class="text-gray-500 text-sm">Jan 1, 2022 - 3 min read</p>
</div>
</div>
</article>
<article class="bg-white rounded-2xl shadow-sm relative">
<img class="rounded-t-2xl h-60 w-full object-cover"
src="https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="img">
<span class="absolute top-5 left-5 bg-green-200 text-green-800 px-3 py-1 rounded-full text-sm">Nature</span>
<div class="p-5">
<h5 class="font-semibold text-xl">Lorem ipsum dolor sit amet</h5>
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div class="p-5 flex">
<img class="h-10 w-10 object-cover rounded-full mr-3"
src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=344&q=80"
alt="">
<div>
<h6>John Roger</h6>
<p class="text-gray-500 text-sm">Mar 19, 2022 - 6 min read</p>
</div>
</div>
</article>
<article class="bg-white rounded-2xl shadow-sm relative">
<img class="rounded-t-2xl h-60 w-full object-cover"
src="https://images.pexels.com/photos/2041627/pexels-photo-2041627.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="img">
<span class="absolute top-5 left-5 bg-red-200 text-red-800 px-3 py-1 rounded-full text-sm">Workspace</span>
<div class="p-5">
<h5 class="font-semibold text-xl">Lorem ipsum dolor sit amet</h5>
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div class="p-5 flex">
<img class="h-10 w-10 object-cover rounded-full mr-3"
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=750&q=80"
alt="">
<div>
<h6>Anny Parker</h6>
<p class="text-gray-500 text-sm">Sep 13, 2022 - 7 min read</p>
</div>
</div>
</article>
</section>Three Columns Grid with Featured Image
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-10">
<article>
<img class="rounded-2xl h-60 w-full object-cover"
src="https://images.pexels.com/photos/1170412/pexels-photo-1170412.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="img">
<div class="py-5">
<span class="bg-blue-200 text-blue-800 px-3 py-1 rounded-full text-sm">Technical</span>
<h5 class="mt-3 font-semibold text-xl">Lorem ipsum dolor sit amet</h5>
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div class="py-5 flex">
<img class="h-10 w-10 object-cover rounded-full mr-3"
src="https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"
alt="">
<div>
<h6>Sam Doe</h6>
<p class="text-gray-500 text-sm">Jan 1, 2022 - 3 min read</p>
</div>
</div>
</article>
<article>
<img class="rounded-2xl h-60 w-full object-cover"
src="https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="img">
<div class="py-5">
<span class="bg-green-200 text-green-800 px-3 py-1 rounded-full text-sm">Nature</span>
<h5 class="mt-3 font-semibold text-xl">Lorem ipsum dolor sit amet</h5>
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div class="py-5 flex">
<img class="h-10 w-10 object-cover rounded-full mr-3"
src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=344&q=80"
alt="">
<div>
<h6>John Roger</h6>
<p class="text-gray-500 text-sm">Mar 19, 2022 - 6 min read</p>
</div>
</div>
</article>
<article>
<img class="rounded-2xl h-60 w-full object-cover"
src="https://images.pexels.com/photos/2041627/pexels-photo-2041627.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="img">
<div class="py-5">
<span class="bg-red-200 text-red-800 px-3 py-1 rounded-full text-sm">Workspace</span>
<h5 class="mt-3 font-semibold text-xl">Lorem ipsum dolor sit amet</h5>
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div class="py-5 flex">
<img class="h-10 w-10 object-cover rounded-full mr-3"
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=750&q=80"
alt="">
<div>
<h6>Anny Parker</h6>
<p class="text-gray-500 text-sm">Sep 13, 2022 - 7 min read</p>
</div>
</div>
</article>
</section>