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

10k

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

1 year ago

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

43k
Card grid for posts

Author:
Mr Robot

1 year ago

17.1k
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

1 year ago

12.1k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

1 year ago

18.9k
Hover effect card

Author:
Samuel Dawson

1 year ago

23.9k
Verticle card grid
Best suited for news websites

Author:
Mr Robot

1 year ago

11k
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
Responsive Grid with Featured image

Author:
_Amar_

2 years ago

10.6k
Product card

Author:
Simon Scheffer

1 year ago

24.4k
Responsive card grid
Responsive card grid for posts section

Author:
Mr Robot

1 year ago

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

Author:
Noob

2 years ago

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

Author:
R Thapa

1 year ago

8.2k
Responsive Article Section

Author:
Prashant

2 years ago

12.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent