Blog post cards

responsive blog post cards

This tailwind example is contributed by Mr Robot, on 25-Jan-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Article Card, Blog page card, Article card

Card Grid Blog Card

Author Mr Robot

Tailwind v3.4 13.4k 20

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

Mr Robot

3 years ago

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

Amit Pachange

4 years ago

53.8k
Card grid for posts

Mr Robot

3 years ago

24.2k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
Hover effect card

Samuel Dawson

3 years ago

33.3k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25.1k
Verticle card grid
Best suited for news websites

Mr Robot

3 years ago

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

Alok

3 years ago

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

Arya

3 years ago

46.2k
Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
Product card

Simon Scheffer

3 years ago

32.4k
Responsive card grid
Responsive card grid for posts section

Mr Robot

3 years ago

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

Noob

3 years ago

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

R Thapa

3 years ago

11.8k
Responsive Article Section

Prashant

4 years ago

17.2k