Home
Alif Bima Pradana
Latest Blog Card Components

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 CSS v3. It is responsive. similar terms for this example are Article Card, Blog page card, Article card

Card Avatar Blog Card

Author Alif Bima Pradana

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

cards
html , css ,

Author:
Hacker Development

8 months ago

850
Responsive user card with tailwind

Author:
Gopi Yadav

3 years ago

11.6k
Confirmation model

Author:
Mr Robot

3 years ago

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

3 years ago

52.1k
3D Modern Pricing Card
Here's a modern, reusable Pricing Card component that's highly popular on platforms like TailwindFlex. It's clean, responsive, and designed for conversions.

Author:
dev-fab250

8 months ago

776
Card with Thumbnail
Post card with image

Author:
Mr Robot

3 years ago

11.5k
Pricing Plans

Author:
ariaw

4 months ago

509
Trending Users
Tailwind Flex Trending Users Card Design

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

3.9k
User list
User list

Author:
Anonymous

8 months ago

467
Dashboard Stats Widget
Here’s a sleek Stats Widget built with Tailwind CSS that you can sell on TailwindFlex. It includes animated hover effects, trend indicators, and responsive design.

Author:
dev-fab250

8 months ago

1.7k
Blog Author Card

Author:
EliteAI Tools

1 year ago

1.3k
Ripple Animation
Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are loading, loader,Author box, User information,Transitions

Author:
Tofayel Islam

1 month ago

334

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components