Tailwind responsive card grid

This tailwind example is contributed by Piet Vriend, on 21-Jan-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Article Card, Blog page card, Article card

Grid Blog Card

Author Piet Vriend

Tailwind v3.4 11.9k 17

Fork Fullscreen

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-10 md:px-20">
    <div class="bg-white rounded-xl shadow-md overflow-hidden">
        <div class="relative">
            <img class="w-full h-48 object-cover" src="https://via.placeholder.com/600x360">
            <div class="absolute top-0 right-0 bg-indigo-500 text-white font-bold px-2 py-1 m-2 rounded-md">New
            </div>
            <div class="absolute bottom-0 right-0 bg-gray-800 text-white px-2 py-1 m-2 rounded-md text-xs">3 min read
            </div>
        </div>
        <div class="p-4">
            <div class="text-lg font-medium text-gray-800 mb-2">Title</div>
            <p class="text-gray-500 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, mi sed
                egestas tincidunt, libero dolor bibendum nisl, non aliquam quam massa id lacus.</p>
        </div>
    </div>

<div class="bg-white rounded-xl shadow-md overflow-hidden">
        <div class="relative">
            <img class="w-full h-48 object-cover" src="https://via.placeholder.com/600x360">
            <div class="absolute bottom-0 right-0 bg-gray-800 text-white px-2 py-1 m-2 rounded-md text-xs">3 min read
            </div>
        </div>
        <div class="p-4">
            <div class="text-lg font-medium text-gray-800 mb-2">Title</div>
            <p class="text-gray-500 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, mi sed
                egestas tincidunt, libero dolor bibendum nisl, non aliquam quam massa id lacus.</p>
        </div>
    </div>

<div class="bg-white rounded-xl shadow-md overflow-hidden">
        <div class="relative">
            <img class="w-full h-48 object-cover" src="https://via.placeholder.com/600x360">
            <div class="absolute top-0 right-0 bg-indigo-500 text-white font-bold px-2 py-1 m-2 rounded-md">New</div>
            <div class="absolute bottom-0 right-0 bg-gray-800 text-white px-2 py-1 m-2 rounded-md text-xs">3 min read
            </div>
        </div>
        <div class="p-4">
            <div class="text-lg font-medium text-gray-800 mb-2">Title</div>
            <p class="text-gray-500 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, mi sed
                egestas tincidunt, libero dolor bibendum nisl, non aliquam quam massa id lacus.</p>
        </div>
    </div>

</div>

Related Examples

Card grid section
Display article/blog grid

Mr Robot

3 years ago

31.3k
Responsive Card Grid with images

TailwindFlex

4 years ago

21.1k
Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
Tailwind products list

Isabella Kowalski

3 years ago

14.7k
Tailwind image gallery
Responsive grid with evenly spaced image cards. Each card has a title label at the bottom, and there's a subtle hover effect for interactive engagement.

Alok

3 years ago

62.4k
Products card grid
Example of product card grid with product image and pricing

Noob

4 years ago

24.9k
Tailwind product gallery

JaxStone

3 years ago

27.9k
Responsive products grid
Responsive product card grid using tailwind CSS.

Arya

3 years ago

46.2k
Posts / Articles card grid
Present a collection of articles or blog posts in a grid format with their respective featured images

Prajwal Hallale

2 years ago

6.2k
Post Responsive Grid
Laravel News post grid

Mr Robot

4 years ago

13.2k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25.2k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
News website like card grid
fancy card grid

Mr Robot

3 years ago

15k
Card grid

Leon Bachmann

3 years ago

12.7k
Customer testimonies grid

Sameer Sultana

3 years ago

21.3k
Responsive cards layout

Piet Vriend

3 years ago

13.7k