Home
Mr Robot
Responsive card grid

Responsive card grid

Responsive card grid for posts section

This tailwind example is contributed by Mr Robot, on 25-Jan-2023. 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.3k

Fork Fullscreen

<div class="sm:col-span-6 lg:col-span-5">
            <a href="#">
                <div class="h-56 bg-cover text-center overflow-hidden"
                    style="background-image: url('https://tailwindcss.com/img/card-left.jpg')"
                    title="Woman holding a mug">
                </div>
            </a>
            <div
                class="mt-3 bg-white rounded-b lg:rounded-b-none lg:rounded-r flex flex-col justify-between leading-normal">
                <div class="lg:pl-16">
                    <a href="#"
                        class="text-xs text-indigo-600 uppercase font-medium mb-3 flex items-center hover:text-gray-900 transition duration-500 ease-in-out">
                        Fashion
                    </a>
                    <a href="#"
                        class="text-gray-900 font-bold text-lg mb-2 hover:text-indigo-600 transition duration-500 ease-in-out">The
                        perfect summer sweater that you can wear! </a>
                    <p class="text-gray-700 text-xs mt-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
                    </p>
                </div>
            </div>
        </div>

<div class="sm:col-span-6 lg:col-span-4">
            <div class="flex items-start mb-3 pb-3">
                <a href="#" class="inline-block mr-3">
                    <div class="w-20 h-20 bg-cover bg-center"
                        style="background-image:url(https://media.gettyimages.com/photos/cristiano-ronaldo-of-juventus-fc-looks-dejected-during-the-uefa-of-picture-id1227967060?k=6&amp;m=1227967060&amp;s=612x612&amp;w=0&amp;h=cMSMlRyI6YAzcE_C2KgHGRLeVojHYoUhIvhwPBYv8f4=);">
                    </div>
                </a>
                <div class="text-sm">
                    <p class="text-gray-600 text-xs">Aug 18</p>
                    <a href="#" class="text-gray-900 font-medium hover:text-indigo-600 leading-none">Cristiano Ronaldo
                        of Juventus FC looks dejected during the...</a>
                </div>
            </div>
            <div class="flex items-start mb-3 pb-3">
                <a href="#" class="inline-block mr-3">
                    <div class="w-20 h-20 bg-cover bg-center"
                        style="background-image:url(https://media.gettyimages.com/photos/lionel-messi-and-marcandre-ter-stegen-of-fc-barcelona-waits-in-the-picture-id1266763488?k=6&amp;m=1266763488&amp;s=612x612&amp;w=0&amp;h=8vxz9HfQVfrff5N7d1lBVxtLamRQGK3J3lyHkUuuIiw=);">
                    </div>
                </a>
                <div class="text-sm w-2/3">
                    <p class="text-gray-600 text-xs">Jan 18</p>
                    <a href="#" class="text-gray-900 font-medium hover:text-indigo-600 leading-none">Barcelona v Bayern
                        Munich </a>
                </div>
            </div>
            <div class="flex items-start mb-3 pb-3">
                <a href="#" class="inline-block mr-3">
                    <div class="w-20 h-20 bg-cover bg-center"
                        style="background-image:url(https://media.gettyimages.com/photos/cristiano-ronaldo-of-juventus-fc-looks-dejected-during-the-uefa-of-picture-id1227967060?k=6&amp;m=1227967060&amp;s=612x612&amp;w=0&amp;h=cMSMlRyI6YAzcE_C2KgHGRLeVojHYoUhIvhwPBYv8f4=);">
                    </div>
                </a>
                <div class="text-sm">
                    <p class="text-gray-600 text-xs">Aug 18</p>
                    <a href="#" class="text-gray-900 font-medium hover:text-indigo-600 leading-none">Cristiano Ronaldo
                        of Juventus FC looks dejected during the...</a>
                </div>
            </div>
            <div class="flex items-start">
                <a href="#" class="inline-block mr-3">
                    <div class="w-20 h-20 bg-cover bg-center"
                        style="background-image:url(https://media.gettyimages.com/photos/lionel-messi-of-fc-barcelona-looks-dejected-following-his-teams-in-picture-id1266341828?k=6&amp;m=1266341828&amp;s=612x612&amp;w=0&amp;h=FZi-bSrIlOEE01780h79GsbBYPqZo2l3aaCxoktWADY=);">
                    </div>
                </a>
                <div class="text-sm w-2/3">
                    <p class="text-gray-600 text-xs">July 23</p>
                    <a href="#" class="text-gray-900 font-medium hover:text-indigo-600 leading-none">Barcelona v Bayern
                        Munich - UEFA Champions League </a>
                </div>
            </div>
        </div>

<div class="sm:col-span-12 lg:col-span-3">
            <a href="#">
                <div class="h-56 bg-cover text-center overflow-hidden"
                    style="background-image: url('https://tailwindcss.com/img/card-left.jpg')"
                    title="Woman holding a mug">
                </div>
            </a>
            <div
                class="mt-3 bg-white rounded-b lg:rounded-b-none lg:rounded-r flex flex-col justify-between leading-normal">
                <div class="">
                    <a href="#"
                        class="text-xs text-indigo-600 uppercase font-medium flex items-center hover:text-gray-900 transition duration-500 ease-in-out">
                        Fashion
                    </a>
                    <a href="#"
                        class="text-gray-900 font-bold text-lg mb-2 hover:text-indigo-600 transition duration-500 ease-in-out">The
                        perfect summer sweater that you can wear! </a>
                    <p class="text-gray-700 text-xs mt-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
            </div>
        </div>

</div>
</div>

Related Examples

News website like card grid
fancy card grid

Author:
Mr Robot

1 year ago

11.7k
Feature display cards (grid layout)

Author:
Sophia Baker

1 year ago

12.9k
Responsive Card Grid with images

Author:
TailwindFlex

2 years ago

15.9k
Post Responsive Grid
Laravel News post grid

Author:
Mr Robot

2 years ago

10.5k
Card grid for posts

Author:
Mr Robot

1 year ago

17.1k
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.

Author:
Alok

1 year ago

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

Author:
Arya

2 years ago

35.6k
Card grid section
Display article/blog grid

Author:
Mr Robot

1 year ago

21.2k
Blog post cards
responsive blog post cards

Author:
Mr Robot

1 year ago

10k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

1 year ago

18.9k
Masonry Grid
Auto-adjusting masonry grid

Author:
Simon Scheffer

1 year ago

26.2k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

2 years ago

43.1k
Company icons grid

Author:
Amit Pachange

1 year ago

11.6k
Short and simple card grid
Best suited for news websites

Author:
Mr Robot

1 year ago

9.4k
Image Grid
The layout is designed to showcase various categories or items using images and descriptive text. Each grid item features a high-quality image and a centered text overlay with a semi-transparent background

Author:
R Thapa

1 year ago

11.1k
Blog Post Showcase
a grid showcasing the blog posts with images and brief descriptions

Author:
Henrik R.

7 months ago

2.1k
Verticle card grid
Best suited for news websites

Author:
Mr Robot

1 year ago

11k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent