Home
Mr Robot
Short and simple card grid

Short and simple card grid

Best suited for news websites

This tailwind example is contributed by Mr Robot, on 29-Dec-2022. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Article Card, Blog page card, Article card

Grid Blog Card

Author Mr Robot

9.4k

Fork Fullscreen

<div class="relative h-64 w-full flex items-end justify-start text-left bg-cover bg-center"
            style="background-image:url(https://media.gettyimages.com/photos/at-the-the-network-tolo-televised-debate-dr-abdullah-abdullah-with-picture-id1179614034?k=6&amp;m=1179614034&amp;s=612x612&amp;w=0&amp;h=WwIX3RMsOQEn5DovD9J3e859CZTdxbHHD3HRyrgU3A8=);">
            <div class="absolute top-0 mt-20 right-0 bottom-0 left-0 bg-gradient-to-b from-transparent to-gray-900">
            </div>
            <div class="absolute top-0 right-0 left-0 mx-5 mt-2 flex justify-between items-center">
                <a href="#"
                    class="text-xs bg-indigo-600 text-white px-5 py-2 uppercase hover:bg-white hover:text-indigo-600 transition ease-in-out duration-500">Politics</a>
                <div class="text-white font-regular flex flex-col justify-start">
                    <span class="text-3xl leading-0 font-semibold">25</span>
                    <span class="-mt-3">May</span>
                </div>
            </div>
            <main class="p-5 z-10">
                <a href="#"
                    class="text-md tracking-tight font-medium leading-7 font-regular text-white hover:underline">Dr.
                    Abdullah Abdullah's Presidential Election Campaign
                </a>
            </main>

</div>

<div class="relative h-64 w-full flex items-end justify-start text-left bg-cover bg-center"
            style="background-image:url(https://media.gettyimages.com/photos/ashraf-ghani-afghanistans-president-speaks-at-the-council-on-foreign-picture-id850794338?k=6&amp;m=850794338&amp;s=612x612&amp;w=0&amp;h=b_XBw5S38Cioslqr6VL3e36cWQU205IsInqDXZpDOD4=);">
            <div class="absolute top-0 mt-20 right-0 bottom-0 left-0 bg-gradient-to-b from-transparent to-gray-900">
            </div>
            <div class="absolute top-0 right-0 left-0 mx-5 mt-2 flex justify-between items-center">
                <a href="#"
                    class="text-xs bg-indigo-600 text-white px-5 py-2 uppercase hover:bg-white hover:text-indigo-600 transition ease-in-out duration-500">Politics</a>
                <div class="text-white font-regular flex flex-col justify-start">
                    <span class="text-3xl leading-0 font-semibold">10</span>
                    <span class="-mt-3">Mar</span>
                </div>
            </div>
            <main class="p-5 z-10">
                <a href="#"
                    class="text-md tracking-tight font-medium leading-7 font-regular text-white hover:underline">Afghanistan's
                    President Ashraf Ghani Speaks At The Council
                </a>
            </main>

</div>

<div class="relative h-64 w-full flex items-end justify-start text-left bg-cover bg-center"
            style="background-image:url(https://media.gettyimages.com/photos/afghan-president-ashraf-ghani-arrives-to-the-welcoming-ceremony-the-picture-id694155252?k=6&amp;m=694155252&amp;s=612x612&amp;w=0&amp;h=IIJPetzJL-hAgPkE4hm2wUKvO4YOav8jJp484CgLEUs=);">
            <div class="absolute top-0 mt-20 right-0 bottom-0 left-0 bg-gradient-to-b from-transparent to-gray-900">
            </div>
            <div class="absolute top-0 right-0 left-0 mx-5 mt-2 flex justify-between items-center">
                <a href="#"
                    class="text-xs bg-indigo-600 text-white px-5 py-2 uppercase hover:bg-white hover:text-indigo-600 transition ease-in-out duration-500">Politics</a>
                <div class="text-white font-regular flex flex-col justify-start">
                    <span class="text-3xl leading-0 font-semibold">20</span>
                    <span class="-mt-3">Jan</span>
                </div>
            </div>
            <main class="p-5 z-10">
                <a href="#"
                    class="text-md tracking-tight font-medium leading-7 font-regular text-white hover:underline">Middle
                    East Participants Gather In Warsaw
                </a>
            </main>

</div>

</div>
</div>

Related Examples