Home
Mr Robot
Responsive card grid

Responsive card grid

responsive card grid for articles

This tailwind example is contributed by Mr Robot, on 10-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

Card Grid Blog Card

Author Mr Robot

11.3k

Fork Fullscreen

<div class="max-w-screen-xl mx-auto p-5 sm:p-10 md:p-16">
    <div class="grid grid-cols-1 md:grid-cols-3 sm:grid-cols-2 gap-10">
        <div
            class="border-r border-b border-l border-gray-400 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r flex flex-col justify-between leading-normal">
            <img src="https://images.pexels.com/photos/1181467/pexels-photo-1181467.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500" class="w-full mb-3">
            <div class="p-4 pt-2">
                <div class="mb-8">
                    <p class="text-sm text-gray-600 flex items-center">
                        <svg class="fill-current text-gray-500 w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 20 20">
                            <path
                                d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z">
                            </path>
                        </svg>
                        Members only
                    </p>
                    <a href="#" class="text-gray-900 font-bold text-lg mb-2 hover:text-indigo-600 inline-block">Can
                        coffee make you a better developer?</a>
                    <p class="text-gray-700 text-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
                </div>
                <div class="flex items-center">
                    <a
                        href="#"><img class="w-10 h-10 rounded-full mr-4" src="https://tailwindcss.com/img/jonathan.jpg" alt="Avatar of Jonathan Reinink"></a>
                    <div class="text-sm">
                        <a href="#" class="text-gray-900 font-semibold leading-none hover:text-indigo-600">Jonathan
                            Reinink</a>
                        <p class="text-gray-600">Aug 18</p>
                    </div>
                </div>
            </div>
        </div>

<div
            class="border-r border-b border-l border-gray-400 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r flex flex-col justify-between leading-normal">
            <img src="https://images.pexels.com/photos/1181467/pexels-photo-1181467.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500" class="w-full mb-3">
            <div class="p-4 pt-2">
                <div class="mb-8">
                    <p class="text-sm text-gray-600 flex items-center">
                        <svg class="fill-current text-gray-500 w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 20 20">
                            <path
                                d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z">
                            </path>
                        </svg>
                        Members only
                    </p>
                    <a href="#" class="text-gray-900 font-bold text-lg mb-2 hover:text-indigo-600 inline-block">Can
                        coffee make you a better developer?</a>
                    <p class="text-gray-700 text-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
                </div>
                <div class="flex items-center">
                    <a
                        href="#"><img class="w-10 h-10 rounded-full mr-4" src="https://tailwindcss.com/img/jonathan.jpg" alt="Avatar of Jonathan Reinink"></a>
                    <div class="text-sm">
                        <a href="#" class="text-gray-900 font-semibold leading-none hover:text-indigo-600">Jonathan
                            Reinink</a>
                        <p class="text-gray-600">Aug 18</p>
                    </div>
                </div>
            </div>
        </div>

</div>
</div>

Related Examples

Card grid section
Display article/blog grid

Author:
Mr Robot

1 year ago

19.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

40.2k
Card grid for posts

Author:
Mr Robot

1 year ago

15.8k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

1 year ago

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

Author:
Arya

1 year ago

33.6k
Responsive Article Section

Author:
Prashant

2 years ago

11.7k
Tailwind products list

Author:
Isabella Kowalski

1 year ago

10.4k
Blog post cards
responsive blog post cards

Author:
Mr Robot

1 year ago

9.7k
Hover effect card

Author:
Samuel Dawson

1 year ago

22k
Responsive Grid with Featured image

Author:
_Amar_

2 years ago

9.9k
Card with image full width
This component is a card designed for showcasing featured blog posts. It includes the post title, a captivating image, category links, and author details.

Author:
Mr Robot

1 year ago

10.5k
Product card

Author:
Simon Scheffer

1 year ago

22.9k
Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

9 months ago

14.5k
Articles Card Grid

Author:
Noob

2 years ago

9.2k
Tailwind card

Author:
Conan Hilton

1 year ago

10.3k
Images grid
Responsive image grid with tailwindcss.

Author:
Sienna

1 year ago

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

Author:
Noob

1 year ago

17.2k
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

44.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 1600+ componenent