~/css/tailwind-cards

6 Tailwind Cards

6 TailwindPublished 2026-10-04Free · no sign-up

Six card designs in Tailwind: a content card where the whole card is clickable, a dashboard stat card with a sparkline, a horizontal card that stacks on phones, a glass card, a profile card with an overlapping avatar and a feature card grid.

Filter demos

01. Tailwind Content Card

TailwindCard

A standard content card with an image area, category, title, summary and a read-more link. The whole card is clickable through a stretched link made with after:absolute after:inset-0, and only the title is announced as the link.

View code

<article class="relative w-full max-w-xs overflow-hidden rounded-2xl bg-white shadow-lg shadow-slate-900/10 focus-within:ring-2 focus-within:ring-blue-600">
  <div class="aspect-[16/10] bg-gradient-to-br from-amber-200 to-orange-300"></div>
  <div class="p-5"><p class="text-xs font-bold uppercase tracking-wider text-blue-700">Guide</p><h3 class="mt-1 text-lg font-bold text-slate-900"><a href="#" class="after:absolute after:inset-0 focus:outline-none">Pricing handmade products</a></h3><p class="mt-1 text-sm leading-relaxed text-slate-600">Cover materials, time and fees without scaring buyers away.</p></div>
</article>

02. Tailwind Dark Stat Card

TailwindDashboard

A dashboard card with a label, a large number, a trend chip and a tiny sparkline drawn in SVG. The trend says up 12% in text as well as with an arrow, so the meaning does not depend on the green colour.

View code

<div class="w-full max-w-xs rounded-2xl border border-slate-800 bg-slate-900 p-5">
  <p class="text-sm text-slate-400">Revenue this week</p>
  <div class="mt-1 flex items-end justify-between gap-3"><b class="text-3xl text-white">$8,240</b><span class="rounded-full bg-emerald-400/15 px-2 py-0.5 text-xs font-bold text-emerald-300">&#9650; 12%</span></div>
  <svg class="mt-4 h-12 w-full" viewBox="0 0 120 40" preserveAspectRatio="none" aria-hidden="true"><path d="M0 32 L20 28 L40 30 L60 20 L80 22 L100 10 L120 12" fill="none" stroke="#38bdf8" stroke-width="2.5"/></svg>
</div>

03. Tailwind Horizontal Card

TailwindLayout

A card with the image beside the text from the sm breakpoint and stacked above it on phones, using flex-col sm:flex-row. The image area keeps a fixed width on wider screens while the text takes the remaining space.

View code

<article class="flex w-full max-w-lg flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white sm:flex-row">
  <div class="h-32 bg-gradient-to-br from-teal-300 to-cyan-500 sm:h-auto sm:w-40 sm:shrink-0"></div>
  <div class="p-5"><h3 class="font-bold text-slate-900">Workshop: wheel throwing</h3><p class="mt-1 text-sm leading-relaxed text-slate-600">Saturdays, 10am to 1pm. All materials included, no experience needed.</p><a href="#" class="mt-3 inline-block text-sm font-bold text-teal-700 hover:underline">Book a place &rarr;</a></div>
</article>

04. Tailwind Glass Card

TailwindGlass

A frosted glass card over colourful blobs, using bg-white/10, backdrop-blur-xl and a white border at low opacity. The card's text sits on a dark enough tint to stay readable where the shapes behind are bright.

View code

<div class="relative grid h-72 w-full max-w-sm place-items-center overflow-hidden rounded-3xl bg-slate-950">
  <span class="absolute -left-6 top-4 h-40 w-40 rounded-full bg-cyan-500"></span><span class="absolute -right-6 bottom-2 h-36 w-36 rounded-full bg-fuchsia-600"></span>
  <div class="relative w-60 rounded-2xl border border-white/20 bg-slate-950/40 p-5 text-white backdrop-blur-xl"><p class="text-sm text-slate-200">Balance</p><b class="text-2xl">$2,450.80</b><p class="mt-3 font-mono text-sm tracking-widest text-slate-200">&bull;&bull;&bull;&bull; 4821</p></div>
</div>

05. Tailwind Profile Card

TailwindProfile

A profile card with a cover band, an overlapping avatar using a negative margin, the name, role and two action buttons. ring-4 ring-white separates the avatar from the cover, and the buttons share the width with flex-1.

View code

<div class="w-full max-w-xs overflow-hidden rounded-2xl bg-white text-center shadow-lg shadow-slate-900/10">
  <div class="h-20 bg-gradient-to-r from-indigo-400 to-sky-400"></div>
  <span class="mx-auto -mt-10 grid h-20 w-20 place-items-center rounded-full bg-amber-200 text-xl font-extrabold text-amber-900 ring-4 ring-white" aria-hidden="true">NK</span>
  <div class="p-5 pt-3"><h3 class="font-bold text-slate-900">Nadia Karim</h3><p class="text-sm text-slate-600">Ceramic artist, Lahore</p>
    <div class="mt-4 flex gap-2"><a href="#" class="flex-1 rounded-lg bg-slate-900 py-2 text-sm font-bold text-white">Follow</a><a href="#" class="flex-1 rounded-lg border border-slate-300 py-2 text-sm font-bold text-slate-900">Message</a></div></div>
</div>

06. Tailwind Feature Card Grid

TailwindFeatures

A grid of small feature cards with icon tiles and two lines of text, going from one column to two with sm:grid-cols-2. Each card is plain content rather than a link, which suits feature lists on landing pages.

View code

<div class="grid w-full max-w-lg grid-cols-1 gap-3 sm:grid-cols-2">
  <div class="rounded-2xl border border-slate-800 bg-slate-900 p-4"><span class="grid h-9 w-9 place-items-center rounded-lg bg-indigo-500/20 text-indigo-300" aria-hidden="true">&#9889;</span><h3 class="mt-3 font-bold text-white">Fast checkout</h3><p class="text-sm text-slate-400">One page, saved cards, done.</p></div>
  <div class="rounded-2xl border border-slate-800 bg-slate-900 p-4"><span class="grid h-9 w-9 place-items-center rounded-lg bg-emerald-500/20 text-emerald-300" aria-hidden="true">&#128230;</span><h3 class="mt-3 font-bold text-white">Auto labels</h3><p class="text-sm text-slate-400">Shipping labels print in bulk.</p></div>
  <div class="rounded-2xl border border-slate-800 bg-slate-900 p-4"><span class="grid h-9 w-9 place-items-center rounded-lg bg-amber-500/20 text-amber-300" aria-hidden="true">&#128202;</span><h3 class="mt-3 font-bold text-white">Clear reports</h3><p class="text-sm text-slate-400">Know what sells, every week.</p></div>
  <div class="rounded-2xl border border-slate-800 bg-slate-900 p-4"><span class="grid h-9 w-9 place-items-center rounded-lg bg-pink-500/20 text-pink-300" aria-hidden="true">&#128172;</span><h3 class="mt-3 font-bold text-white">Customer chat</h3><p class="text-sm text-slate-400">Answer questions in one inbox.</p></div>
</div>

About these Tailwind Cards

Whole-card links

after:absolute after:inset-0 on the title link stretches its click area over a relative card, so the card is one link and the title is its name.

Responsive direction

flex-col sm:flex-row puts the image above the text on phones and beside it from the sm breakpoint.

Overlapping avatars

A negative top margin such as -mt-10 pulls the avatar over the cover band, and ring-4 ring-white separates it from the colour behind.

Glass readability

Keep a dark tint behind text on glass cards so it stays readable over bright shapes.

Frequently asked questions

Do these need JavaScript?

No.

How do I show focus on a whole-card link?

Use focus-within:ring on the card, as the content card does.

Is there a CSS version?

Yes, see the CSS cards collection.