Latest Blog Card Components

Stay ahead of the curve with fresh content on code, design, startups, and everything in between.

This tailwind example is contributed by Alif Bima Pradana, on 07-Feb-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Article Card, Blog page card, Article card

Card Avatar Blog Card

Author Alif Bima Pradana

Tailwind v3.4 454 3

Fork Fullscreen

<h1 class="text-3xl font-semibold text-center mx-auto pt-10">Latest Blog</h1>
<p class="text-sm text-slate-500 text-center mt-2 max-w-lg mx-auto">
    Stay ahead of the curve with fresh content on code, design, startups, and everything in between.
</p>

<div class="flex flex-wrap items-center justify-center gap-8 pt-12">
    <div class="max-w-72 w-full hover:-translate-y-0.5 transition duration-300">
        <img class="rounded-xl" src="https://images.unsplash.com/photo-1590650516494-0c8e4a4dd67e?w=1200&h=800&auto=format&fit=crop&q=60" alt="">
        <h3 class="text-base text-slate-900 font-medium mt-3">Color Psychology in UI: How to Choose the Right Palette</h3>
        <p class="text-xs text-indigo-600 font-medium mt-1">UI/UX design</p>
    </div>
    <div class="max-w-72 w-full hover:-translate-y-0.5 transition duration-300">
        <img class="rounded-xl" src="https://images.unsplash.com/photo-1714974528646-ea024a3db7a7?w=1200&h=800&auto=format&fit=crop&q=60" alt="">
        <h3 class="text-base text-slate-900 font-medium mt-3">Color Psychology in UI: How to Choose the Right Palette</h3>
        <p class="text-xs text-indigo-600 font-medium mt-1">UI/UX design</p>
    </div>
    <div class="max-w-72 w-full hover:-translate-y-0.5 transition duration-300">
        <img class="rounded-xl" src="https://images.unsplash.com/photo-1713947501966-34897f21162e?w=1200&h=800&auto=format&fit=crop&q=60" alt="">
        <h3 class="text-base text-slate-900 font-medium mt-3">Color Psychology in UI: How to Choose the Right Palette</h3>
        <p class="text-xs text-indigo-600 font-medium mt-1">UI/UX design</p>
    </div>
</div>

Related Examples

Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
Responsive Article Section

Prashant

4 years ago

17.2k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25.2k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.5k
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
Card grid section
Display article/blog grid

Mr Robot

3 years ago

31.3k
Card with image
Blog post card

Mr Robot

3 years ago

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

Mr Robot

3 years ago

14.1k
Profile Card
Show more details on hover

Tamani Phiri

3 years ago

15.2k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Mike Varen

2 years ago

5.2k
Card
amazing card

Cristian

1 year ago

2.5k