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 8 1

Fork Fullscreen

<section class="mx-auto my-8 w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
    <div class="mb-8 flex flex-col justify-between gap-2 sm:flex-row sm:items-end">
      <div>
        <h2 class="text-2xl font-semibold tracking-tight text-slate-900 sm:text-3xl">Editorial Elegance</h2>
        <p class="mt-1 text-sm text-slate-500">Refined serif typography, floating category pills, and deep elevation.</p>
      </div>
      <span class="text-xs font-mono text-slate-400">4-Column Responsive</span>
    </div>

<div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
      
      <article class="rise group relative flex flex-col overflow-hidden rounded-2xl bg-white border border-slate-200/70 shadow-sm transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_24px_48px_-12px_rgba(15,23,42,0.14)] hover:border-slate-300" style="--d:0ms">
        <a href="#" class="flex flex-col h-full">
          <div class="relative aspect-[16/11] overflow-hidden bg-slate-100">
            <img src="https://picsum.photos/seed/blog5/800/600" alt="" loading="lazy" class="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105">
            <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
            <span class="absolute top-3.5 left-3.5 rounded-full bg-white/90 px-3 py-1 text-xs font-semibold tracking-wide text-slate-800 shadow-sm backdrop-blur-md">Design</span>
          </div>

<h3 class="serif mt-3 text-xl font-medium leading-snug text-slate-900 transition-colors duration-300 group-hover:text-rose-600 sm:text-[1.35rem]">
              The quiet return of white space in product design
            </h3>

<p class="mt-3 line-clamp-2 text-sm leading-relaxed text-slate-500">
              Why the best interfaces now say less, and how spacing became the loudest design choice.
            </p>

<div class="mt-auto pt-6 flex items-center gap-3 border-t border-slate-100">
              <img src="https://i.pravatar.cc/80?img=6" alt="" class="h-8 w-8 rounded-full ring-2 ring-slate-100 object-cover">
              <div class="text-xs">
                <p class="font-semibold text-slate-800">Aanya Mehta</p>
                <p class="text-slate-400">Staff Designer</p>
              </div>
            </div>
          </div>
        </a>
      </article>

<article class="rise group relative flex flex-col overflow-hidden rounded-2xl bg-white border border-slate-200/70 shadow-sm transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_24px_48px_-12px_rgba(15,23,42,0.14)] hover:border-slate-300" style="--d:90ms">
        <a href="#" class="flex flex-col h-full">
          <div class="relative aspect-[16/11] overflow-hidden bg-slate-100">
            <img src="https://picsum.photos/seed/blog12/800/600" alt="" loading="lazy" class="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105">
            <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
            <span class="absolute top-3.5 left-3.5 rounded-full bg-white/90 px-3 py-1 text-xs font-semibold tracking-wide text-slate-800 shadow-sm backdrop-blur-md">Technology</span>
          </div>

<h3 class="serif mt-3 text-xl font-medium leading-snug text-slate-900 transition-colors duration-300 group-hover:text-rose-600 sm:text-[1.35rem]">
              Why small language models are winning at the edge
            </h3>

<p class="mt-3 line-clamp-2 text-sm leading-relaxed text-slate-500">
              Smaller models are running on phones and laptops, with incredible power efficiency.
            </p>

<div class="mt-auto pt-6 flex items-center gap-3 border-t border-slate-100">
              <img src="https://i.pravatar.cc/80?img=13" alt="" class="h-8 w-8 rounded-full ring-2 ring-slate-100 object-cover">
              <div class="text-xs">
                <p class="font-semibold text-slate-800">Rohan Kapoor</p>
                <p class="text-slate-400">AI Researcher</p>
              </div>
            </div>
          </div>
        </a>
      </article>

<article class="rise group relative flex flex-col overflow-hidden rounded-2xl bg-white border border-slate-200/70 shadow-sm transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_24px_48px_-12px_rgba(15,23,42,0.14)] hover:border-slate-300" style="--d:180ms">
        <a href="#" class="flex flex-col h-full">
          <div class="relative aspect-[16/11] overflow-hidden bg-slate-100">
            <img src="https://picsum.photos/seed/blog32/800/600" alt="" loading="lazy" class="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105">
            <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
            <span class="absolute top-3.5 left-3.5 rounded-full bg-white/90 px-3 py-1 text-xs font-semibold tracking-wide text-slate-800 shadow-sm backdrop-blur-md">Travel</span>
          </div>

<h3 class="serif mt-3 text-xl font-medium leading-snug text-slate-900 transition-colors duration-300 group-hover:text-rose-600 sm:text-[1.35rem]">
              Slow mornings in Jaipur: a guide beyond the forts
            </h3>

<p class="mt-3 line-clamp-2 text-sm leading-relaxed text-slate-500">
              Chai stalls, step-wells and rooftop breakfasts for travellers who prefer to wander.
            </p>

<div class="mt-auto pt-6 flex items-center gap-3 border-t border-slate-100">
              <img src="https://i.pravatar.cc/80?img=33" alt="" class="h-8 w-8 rounded-full ring-2 ring-slate-100 object-cover">
              <div class="text-xs">
                <p class="font-semibold text-slate-800">Ishita Rao</p>
                <p class="text-slate-400">Travel Essayist</p>
              </div>
            </div>
          </div>
        </a>
      </article>

<article class="rise group relative flex flex-col overflow-hidden rounded-2xl bg-white border border-slate-200/70 shadow-sm transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_24px_48px_-12px_rgba(15,23,42,0.14)] hover:border-slate-300" style="--d:270ms">
        <a href="#" class="flex flex-col h-full">
          <div class="relative aspect-[16/11] overflow-hidden bg-slate-100">
            <img src="https://picsum.photos/seed/blog47/800/600" alt="" loading="lazy" class="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105">
            <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
            <span class="absolute top-3.5 left-3.5 rounded-full bg-white/90 px-3 py-1 text-xs font-semibold tracking-wide text-slate-800 shadow-sm backdrop-blur-md">Startups</span>
          </div>

<h3 class="serif mt-3 text-xl font-medium leading-snug text-slate-900 transition-colors duration-300 group-hover:text-rose-600 sm:text-[1.35rem]">
              What we learned shipping a product in 30 days
            </h3>

<p class="mt-3 line-clamp-2 text-sm leading-relaxed text-slate-500">
              A blunt look at scope, sleep and the three features we ruthlessly cut on day nine.
            </p>

<div class="mt-auto pt-6 flex items-center gap-3 border-t border-slate-100">
              <img src="https://i.pravatar.cc/80?img=48" alt="" class="h-8 w-8 rounded-full ring-2 ring-slate-100 object-cover">
              <div class="text-xs">
                <p class="font-semibold text-slate-800">Kabir Singh</p>
                <p class="text-slate-400">Founder & CEO</p>
              </div>
            </div>
          </div>
        </a>
      </article>

<article class="rise group relative flex flex-col overflow-hidden rounded-2xl bg-white border border-slate-200/70 shadow-sm transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_24px_48px_-12px_rgba(15,23,42,0.14)] hover:border-slate-300" style="--d:0ms">
        <a href="#" class="flex flex-col h-full">
          <div class="relative aspect-[16/11] overflow-hidden bg-slate-100">
            <img src="https://picsum.photos/seed/blog5/800/600" alt="" loading="lazy" class="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105">
            <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
            <span class="absolute top-3.5 left-3.5 rounded-full bg-white/90 px-3 py-1 text-xs font-semibold tracking-wide text-slate-800 shadow-sm backdrop-blur-md">Design</span>
          </div>

<p class="mt-3 line-clamp-2 text-sm leading-relaxed text-slate-500">
              Why the best interfaces now say less, and how spacing became the loudest design choice.
            </p>

<p class="mt-3 line-clamp-2 text-sm leading-relaxed text-slate-500">
              Smaller models are running on phones and laptops, with incredible power efficiency.
            </p>

<p class="mt-3 line-clamp-2 text-sm leading-relaxed text-slate-500">
              Chai stalls, step-wells and rooftop breakfasts for travellers who prefer to wander.
            </p>

<p class="mt-3 line-clamp-2 text-sm leading-relaxed text-slate-500">
              A blunt look at scope, sleep and the three features we ruthlessly cut on day nine.
            </p>

</div>
  </section>

Related Examples

Blog Card

ariaw

11 months ago

875
Card grid for posts

Mr Robot

3 years ago

24.2k
Dynamic Service Showcase with Interactive Flip Cards
This component presents a visually engaging service section featuring interactive flip cards. Each service card displays an image on the front and reveals details on the back when hovered over. The layout is responsive, ensuring seamless adaptability across various screen sizes. The hover effect adds a modern and engaging touch, enhancing user interaction.

Vikas Kushwah

1 year ago

2.1k
Verticle card grid
Best suited for news websites

Mr Robot

3 years ago

14.3k
pile carde scroll
pile carde scroll

Omer fils ELENGA

8 months ago

646
3 columns blog section
de columnis, columni, 3 columns

Anonymous

2 years ago

12.9k
Short and simple card grid
Best suited for news websites

Mr Robot

3 years ago

12.2k
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
Card template

Raul antonio de la cruz hernandez

9 months ago

541
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Ijila Itunu

1 year ago

1.4k
E-Learning Course Card with Badge and Level Indicator
An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

Hamza Atig

1 year ago

1.6k
Targeta
Targeta

Raul antonio de la cruz hernandez

10 months ago

864