Home
Mr Robot
Blog post cards

Blog post cards

responsive blog post cards

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

Card Grid Blog Card

Author Mr Robot

10.8k

Fork Fullscreen

<div class="sm:grid lg:grid-cols-3 sm:grid-cols-2 gap-10">
        <div
            class="hover:bg-gray-900 hover:text-white transition duration-300 max-w-sm rounded overflow-hidden shadow-lg">
            <div class="py-4 px-8">
                <img src="https://tailwindcss.com/img/jonathan.jpg" class="rounded-full h-12 w-12 mb-4">
                <a href="#">
                    <h4 class="text-lg mb-3 font-semibold">How to be effective at working remotely?</h4>
                </a>
                <p class="mb-2 text-sm text-gray-600">Lorem Ipsum is simply dummy text of the printing and typesetting
                    industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

<hr class="mt-4">
                <span class="text-xs">ARTICLE</span>
                &nbsp;<span class="text-xs text-gray-500">PROCESS</span>
            </div>
        </div>

<div
            class="hover:bg-gray-900 hover:text-white transition duration-300 max-w-sm rounded overflow-hidden shadow-lg">
            <div class="py-4 px-8">
                <img src="https://tailwindcss.com/img/jonathan.jpg" class="rounded-full h-12 w-12 mb-4">
                <a href="#">
                    <h4 class="text-lg mb-3 font-semibold">How to be effective at working remotely?</h4>
                </a>
                <p class="mb-2 text-sm text-gray-600">Lorem Ipsum is simply dummy text of the printing and typesetting
                    industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

<hr class="mt-4">
                <span class="text-xs">ARTICLE</span>
                &nbsp;<span class="text-xs text-gray-500">PROCESS</span>
            </div>
        </div>

<hr class="mt-4">
                <span class="text-xs">ARTICLE</span>
                &nbsp;<span class="text-xs text-gray-500">PROCESS</span>
            </div>
        </div>

</div>
</div>

Related Examples

Card grid section
Display article/blog grid

Author:
Mr Robot

2 years ago

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

47.2k
Card grid for posts

Author:
Mr Robot

2 years ago

19k
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

2 years ago

13.5k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

21.1k
Hover effect card

Author:
Samuel Dawson

2 years ago

27k
Verticle card grid
Best suited for news websites

Author:
Mr Robot

2 years ago

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

2 years ago

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

Author:
Arya

2 years ago

39k
Responsive Grid with Featured image

Author:
_Amar_

2 years ago

11.4k
Product card

Author:
Simon Scheffer

2 years ago

27.2k
Responsive card grid
Responsive card grid for posts section

Author:
Mr Robot

2 years ago

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

Author:
Noob

2 years ago

20.4k
Clickable and Responsive Card Grid
It is designed to showcase and link to various topics or content categories.

Author:
R Thapa

1 year ago

9.2k
Responsive Article Section

Author:
Prashant

2 years ago

13.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components