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 98 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

Card blog
Targeta para blog

Raul antonio de la cruz hernandez

1 year ago

749
Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
carde Iptplus
Iptplus carde

Omer fils ELENGA

11 months ago

471
Modern Architecture Blog & News Grid UI Layout
A clean, minimal, and fully responsive Blog/News grid layout built with Tailwind CSS. Features a 2-column article grid with fixed title alignment, clean pagination, and a sticky sidebar with categories & CTA widget. Perfect for architectural firms, magazine portals, and CMS integrations.

Alief Malik

2 months ago

190
Card animate

Raul antonio de la cruz hernandez

1 year ago

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

Prajwal Hallale

3 years ago

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

Sufyan jutt

9 months ago

889
Responsive Article Section

Prashant

4 years ago

17.3k
Blog Card

Md. Tofayel islam

2 years ago

2.6k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.7k
Tailwind CSS Blog sharing buttons with blog details
Introducing our Blog Sharing Buttons with Blog Details component, designed to enhance the social sharing experience on your blog posts.

Abid Ullah

2 years ago

2.4k
Services
explore our awesome Services

ابراهيم سيد

2 years ago

3.7k