Colorful 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 14 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">Creative Neo-Pop</h2>
      <p class="mt-1 text-sm text-slate-500">Playful rotating frames, vibrant pastel contrasts, and magnetic buttons.</p>
    </div>

<div class="grid grid-cols-1 gap-7 sm:grid-cols-2 lg:grid-cols-3">
      <article class="rise group relative flex flex-col justify-between overflow-hidden rounded-[2.2rem] p-6 text-[#151722] shadow-sm transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl" style="background:#FFE66D;--d:0ms">
        <div>
          <div class="flex items-center justify-between">
            <span class="rounded-full bg-black/90 px-3.5 py-1 text-xs font-bold uppercase tracking-wider text-white">Design</span>
            <span class="text-xs font-bold opacity-60">03 Oct</span>
          </div>

<h3 class="display mt-6 text-2xl font-semibold leading-snug">
            The quiet return of white space in product design
          </h3>
          <p class="mt-2 text-sm leading-relaxed opacity-80">
            Why the best interfaces now say less, and how spacing became the loudest choice.
          </p>
        </div>

<div class="mt-8">
          <a href="#" class="inline-flex items-center gap-2 rounded-full bg-slate-950 px-5 py-2.5 text-xs font-bold uppercase tracking-wider text-white transition-all duration-300 hover:bg-white hover:text-black">
            Read story
            <svg class="h-3.5 w-3.5 transition group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
          </a>
        </div>
      </article>

<article class="rise group relative flex flex-col justify-between overflow-hidden rounded-[2.2rem] p-6 text-[#151722] shadow-sm transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl" style="background:#FF9E79;--d:90ms">
        <div>
          <div class="flex items-center justify-between">
            <span class="rounded-full bg-black/90 px-3.5 py-1 text-xs font-bold uppercase tracking-wider text-white">Technology</span>
            <span class="text-xs font-bold opacity-60">29 Sep</span>
          </div>

<h3 class="display mt-6 text-2xl font-semibold leading-snug">
            Why small language models are winning at edge
          </h3>
          <p class="mt-2 text-sm leading-relaxed opacity-80">
            Smaller models are running on phones, and the trade-offs are stunningly better.
          </p>
        </div>

<article class="rise group relative flex flex-col justify-between overflow-hidden rounded-[2.2rem] p-6 text-[#151722] shadow-sm transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl" style="background:#B3A2FF;--d:180ms">
        <div>
          <div class="flex items-center justify-between">
            <span class="rounded-full bg-black/90 px-3.5 py-1 text-xs font-bold uppercase tracking-wider text-white">Travel</span>
            <span class="text-xs font-bold opacity-60">26 Sep</span>
          </div>

<h3 class="display mt-6 text-2xl font-semibold leading-snug">
            Slow mornings in Jaipur: guide beyond the forts
          </h3>
          <p class="mt-2 text-sm leading-relaxed opacity-80">
            Chai stalls, step-wells and rooftop breakfasts for quiet travellers.
          </p>
        </div>

Related Examples

Services
explore our awesome Services

ابراهيم سيد

2 years ago

3.6k
carde Iptplus
Iptplus carde

Omer fils ELENGA

10 months ago

429
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
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
Blog post showcase minimal
a grid showcasing the blog posts with images and title

Henrik R.

2 years ago

4.1k
pile carde scroll
pile carde scroll

Omer fils ELENGA

8 months ago

646
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Hamza Atig

1 year ago

1.4k
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 with image full width
This component is a card designed for showcasing featured blog posts. It includes the post title, a captivating image, category links, and author details.

Mr Robot

3 years ago

14.1k
Targeta
Targeta

Raul antonio de la cruz hernandez

10 months ago

864
Card
amazing card

Cristian

1 year ago

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

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

1 year ago

2.5k