Horizontal 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">
      <h2 class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">Split Horizontal Feed</h2>
      <p class="mt-1 text-sm text-slate-500">Responsive side-by-side layout with fluid image zoom and arrow slide.</p>
    </div>

<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
      
      <article class="rise group flex flex-col sm:flex-row overflow-hidden rounded-2xl bg-white border border-slate-200/80 shadow-sm transition-all duration-300 hover:shadow-xl hover:border-sky-200" style="--d:0ms">
        <div class="relative w-full sm:w-2/5 aspect-[16/10] sm:aspect-auto overflow-hidden bg-slate-100">
          <img src="https://picsum.photos/seed/blog50/700/700" 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-slate-950/30 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
        </div>
        <div class="flex flex-1 flex-col justify-between p-6 sm:p-7">
          <div>
            <span class="inline-flex items-center rounded-md bg-sky-50 px-2.5 py-1 text-xs font-semibold text-sky-700 ring-1 ring-inset ring-sky-700/10">Startups</span>
            <h3 class="mt-3 text-lg font-bold leading-snug text-slate-900 transition group-hover:text-sky-600 sm:text-xl">
              What we learned shipping a product in 30 days
            </h3>
            <p class="mt-2 line-clamp-2 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-6 flex items-center justify-between border-t border-slate-100 pt-4 text-xs font-medium text-slate-500">
            <span>Kabir Singh • 03 Oct</span>
            <a href="#" class="inline-flex items-center gap-1 font-semibold text-sky-600 transition group-hover:translate-x-1">
              Read article
              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
            </a>
          </div>
        </div>
      </article>

<article class="rise group flex flex-col sm:flex-row overflow-hidden rounded-2xl bg-white border border-slate-200/80 shadow-sm transition-all duration-300 hover:shadow-xl hover:border-sky-200" style="--d:90ms">
        <div class="relative w-full sm:w-2/5 aspect-[16/10] sm:aspect-auto overflow-hidden bg-slate-100">
          <img src="https://picsum.photos/seed/blog28/700/700" 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-slate-950/30 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
        </div>
        <div class="flex flex-1 flex-col justify-between p-6 sm:p-7">
          <div>
            <span class="inline-flex items-center rounded-md bg-sky-50 px-2.5 py-1 text-xs font-semibold text-sky-700 ring-1 ring-inset ring-sky-700/10">Lifestyle</span>
            <h3 class="mt-3 text-lg font-bold leading-snug text-slate-900 transition group-hover:text-sky-600 sm:text-xl">
              A calmer desk: five habits for focused work
            </h3>
            <p class="mt-2 line-clamp-2 text-sm leading-relaxed text-slate-500">
              Small changes to your workspace that lower noise without buying anything new.
            </p>
          </div>
          <div class="mt-6 flex items-center justify-between border-t border-slate-100 pt-4 text-xs font-medium text-slate-500">
            <span>Meera Nair • 29 Sep</span>
            <a href="#" class="inline-flex items-center gap-1 font-semibold text-sky-600 transition group-hover:translate-x-1">
              Read article
              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
            </a>
          </div>
        </div>
      </article>
      <article class="rise group flex flex-col sm:flex-row overflow-hidden rounded-2xl bg-white border border-slate-200/80 shadow-sm transition-all duration-300 hover:shadow-xl hover:border-sky-200" style="--d:0ms">
        <div class="relative w-full sm:w-2/5 aspect-[16/10] sm:aspect-auto overflow-hidden bg-slate-100">
          <img src="https://picsum.photos/seed/blog50/700/700" 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-slate-950/30 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
        </div>
        <div class="flex flex-1 flex-col justify-between p-6 sm:p-7">
          <div>
            <span class="inline-flex items-center rounded-md bg-sky-50 px-2.5 py-1 text-xs font-semibold text-sky-700 ring-1 ring-inset ring-sky-700/10">Startups</span>
            <h3 class="mt-3 text-lg font-bold leading-snug text-slate-900 transition group-hover:text-sky-600 sm:text-xl">
              What we learned shipping a product in 30 days
            </h3>
            <p class="mt-2 line-clamp-2 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-6 flex items-center justify-between border-t border-slate-100 pt-4 text-xs font-medium text-slate-500">
            <span>Kabir Singh • 03 Oct</span>
            <a href="#" class="inline-flex items-center gap-1 font-semibold text-sky-600 transition group-hover:translate-x-1">
              Read article
              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
            </a>
          </div>
        </div>
      </article>

Related Examples

Dark Blog Cards

JUGENDRA GANGWAR

1 day ago

10
Simple Footer 3

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

1 year ago

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

Mr Robot

3 years ago

12.2k
Blog section - Htmlwind
Three columns blog section

Htmlwind

1 year ago

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

Henrik R.

2 years ago

5.3k
card design
card design

Tanvir Hasan Bappy (Tanvir)

9 months ago

653
Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Rajesh Maheshwari

1 year ago

1.9k
3D Card
Made a 3d card using tailwind css and the js

Sufyan jutt

8 months ago

883
Clean Architectural Blog & News Section Grid
A sleek, modern, and minimal blog section designed for architecture, portfolio, or agency websites. Features landscape card layouts, top-aligned post titles for consistent grid alignment, category badges, publication dates with icons, and a smooth outlined CTA button.

Alief Malik

2 months ago

79
carde Iptplus
Iptplus carde

Omer fils ELENGA

10 months ago

429
Image Classification Models Response Grid
by AI Without Borders

wtfbrh

1 year ago

2k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Hamza Atig

1 year ago

1.8k