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>