Minimalist Blog Cards

This tailwind example is contributed by JUGENDRA GANGWAR, on 14-Oct-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Article Card, Blog page card, Article card

Blog Card

Author JUGENDRA GANGWAR

Tailwind v3.4 7 1

Fork Fullscreen

<section class="mx-auto my-8 w-full max-w-7xl border-t border-slate-200 px-4 pt-16 pb-6 sm:px-6 lg:px-8">
    <div class="mb-10">
      <h2 class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">Swiss Typographic</h2>
      <p class="mt-1 text-sm text-slate-500">Pure editorial minimalism focusing on rhythm, spacing, and animated rules.</p>
    </div>

<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
      <article class="rise group flex flex-col justify-between border-t border-slate-300/80 pt-6 transition duration-300 hover:border-slate-950" style="--d:0ms">
        <div>
          <div class="flex items-center gap-2 text-xs font-mono uppercase tracking-wider text-slate-400">
            <span>03 Oct</span>
            <span>•</span>
            <span>7 min read</span>
          </div>
          <h3 class="mt-4 text-xl font-bold leading-snug text-slate-900 transition-colors duration-200 group-hover:text-slate-600">
            What we learned shipping a product in 30 days
          </h3>
          <p class="mt-3 text-sm leading-relaxed text-slate-500">
            A blunt look at scope, sleep and the three features we cut on day nine.
          </p>
        </div>

<div class="mt-8">
          <a href="#" class="inline-flex items-center gap-2 text-sm font-semibold text-slate-900">
            <span class="relative">
              Read article
              <span class="absolute -bottom-1 left-0 h-[1.5px] w-0 bg-slate-900 transition-all duration-300 group-hover:w-full"></span>
            </span>
            <svg class="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
          </a>
        </div>
      </article>

<article class="rise group flex flex-col justify-between border-t border-slate-300/80 pt-6 transition duration-300 hover:border-slate-950" style="--d:90ms">
        <div>
          <div class="flex items-center gap-2 text-xs font-mono uppercase tracking-wider text-slate-400">
            <span>29 Sep</span>
            <span>•</span>
            <span>4 min read</span>
          </div>
          <h3 class="mt-4 text-xl font-bold leading-snug text-slate-900 transition-colors duration-200 group-hover:text-slate-600">
            A calmer desk: five habits for focused work
          </h3>
          <p class="mt-3 text-sm leading-relaxed text-slate-500">
            Small changes to your workspace that lower noise without buying anything new.
          </p>
        </div>

<article class="rise group flex flex-col justify-between border-t border-slate-300/80 pt-6 transition duration-300 hover:border-slate-950" style="--d:180ms">
        <div>
          <div class="flex items-center gap-2 text-xs font-mono uppercase tracking-wider text-slate-400">
            <span>26 Sep</span>
            <span>•</span>
            <span>6 min read</span>
          </div>
          <h3 class="mt-4 text-xl font-bold leading-snug text-slate-900 transition-colors duration-200 group-hover:text-slate-600">
            The street-food trail through Old Delhi
          </h3>
          <p class="mt-3 text-sm leading-relaxed text-slate-500">
            From parathe to kulfi: where to eat, what to order and how to pace yourself.
          </p>
        </div>

<article class="rise group flex flex-col justify-between border-t border-slate-300/80 pt-6 transition duration-300 hover:border-slate-950" style="--d:270ms">
        <div>
          <div class="flex items-center gap-2 text-xs font-mono uppercase tracking-wider text-slate-400">
            <span>22 Sep</span>
            <span>•</span>
            <span>5 min read</span>
          </div>
          <h3 class="mt-4 text-xl font-bold leading-snug text-slate-900 transition-colors duration-200 group-hover:text-slate-600">
            Shooting golden hour with just one lens
          </h3>
          <p class="mt-3 text-sm leading-relaxed text-slate-500">
            Why limiting your kit leads to stronger frames and a lighter bag.
          </p>
        </div>

Related Examples

Post Card
Clean card for post grid, Blog grid

Arshid Iqbal

4 weeks ago

115
card

Raul antonio de la cruz hernandez

9 months ago

562
Blog Post Showcase
a grid showcasing the blog posts with images and brief descriptions

Henrik R.

2 years ago

5.3k
Latest Blog Card Components
Stay ahead of the curve with fresh content on code, design, startups, and everything in between.

Alif Bima Pradana

8 months ago

454
Responsive Article Section

Prashant

4 years ago

17.2k
Card
travel place card hover effect card

nahid hasan

1 year ago

2.5k
Card
Card Layout in Tailwind as React Compoment

Deepak Sharma

1 year ago

1.7k
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Hamza Atig

1 year ago

1.7k
Card grid for posts

Mr Robot

3 years ago

24.2k
Posts / Articles card grid
Present a collection of articles or blog posts in a grid format with their respective featured images

Prajwal Hallale

2 years ago

5.5k
Kids E-learning Platform Card
Kids E-learning Platform Card Clone

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.5k
SimpleGrid

wtfbrh

1 year ago

1.7k