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

12.7k

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

3 years ago

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

3 years ago

52.1k
Card grid for posts

Author:
Mr Robot

3 years ago

22.7k
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

3 years ago

15.7k
Hover effect card

Author:
Samuel Dawson

2 years ago

31.9k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

3 years ago

24.1k
Verticle card grid
Best suited for news websites

Author:
Mr Robot

3 years ago

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

Author:
Alok

3 years ago

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

Author:
Arya

3 years ago

44.6k
Responsive Grid with Featured image

Author:
_Amar_

3 years ago

12.5k
Product card

Author:
Simon Scheffer

3 years ago

31.4k
Responsive card grid
Responsive card grid for posts section

Author:
Mr Robot

2 years ago

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

Author:
Noob

3 years ago

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

Author:
R Thapa

2 years ago

11.1k
Responsive Article Section

Author:
Prashant

3 years ago

16.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components