~/css/tailwind-flip-cards

6 Tailwind Flip Cards

5 Tailwind1 with JSPublished 2026-10-04Free · no sign-up

Six flip and reveal cards built with Tailwind: a 3D travel card, a study flashcard flipped by a button, a team member card, a top-over-bottom product flip, a fade-and-slide reveal and a dashboard stat tile.

Filter demos

01. Tailwind 3D Flip Card

Tailwind3D

A flip card made with Tailwind arbitrary properties: [perspective:1000px] on the wrapper, [transform-style:preserve-3d] on the inner layer and [backface-visibility:hidden] on both faces. It turns on hover and on focus-within, so the back link is reachable.

View code

<div tabindex="0" aria-label="Kyoto trip, focus for details" class="group h-72 w-60 rounded-2xl outline-none [perspective:1000px] focus-visible:ring-2 focus-visible:ring-amber-300 focus-visible:ring-offset-4 focus-visible:ring-offset-slate-950">
  <div class="relative h-full w-full transition-transform duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)] group-focus-within:[transform:rotateY(180deg)] motion-reduce:transition-none">
    <div class="absolute inset-0 flex flex-col justify-end rounded-2xl bg-gradient-to-br from-rose-500 to-orange-500 p-6 text-white [backface-visibility:hidden]"><b class="text-2xl">Kyoto</b><span>5 nights from $1,180</span></div>
    <div class="absolute inset-0 flex flex-col justify-center gap-3 rounded-2xl bg-white p-6 text-slate-700 [backface-visibility:hidden] [transform:rotateY(180deg)]"><p class="leading-relaxed">Temple walks, a ryokan stay and a tea ceremony.</p><a href="#" class="self-start rounded-lg bg-slate-900 px-4 py-2 text-sm font-bold text-white">View trip</a></div>
  </div>
</div>

02. Tailwind Click Flip Flashcard

TailwindButton

A study flashcard that flips when you press Show answer, so it works on touch screens. A few lines of script rotate the card and update aria-pressed, Tailwind's arbitrary 3D utilities do the rest, and the hidden face is made inert.

View code

<div id="twfc" class="grid justify-items-center gap-3">
  <div class="relative h-44 w-72 [perspective:900px]">
    <div class="twfc-in relative h-full w-full transition-transform duration-500 [transform-style:preserve-3d] motion-reduce:transition-none">
      <section class="twq absolute inset-0 grid place-items-center rounded-2xl bg-white p-6 text-center text-slate-900 shadow-lg [backface-visibility:hidden]">What does <code>flex-wrap</code> do?</section>
      <section class="twa absolute inset-0 grid place-items-center rounded-2xl bg-indigo-600 p-6 text-center text-white [backface-visibility:hidden] [transform:rotateY(180deg)]" inert>It lets flex items move onto new lines when they run out of room.</section>
    </div>
  </div>
  <button aria-pressed="false" class="rounded-lg bg-slate-900 px-4 py-2 text-sm font-bold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Show answer</button>
</div>

const box = document.getElementById('twfc'), inner = box.querySelector('.twfc-in'), b = box.querySelector('button');
b.addEventListener('click', () => {
  const on = b.getAttribute('aria-pressed') !== 'true';
  inner.style.transform = on ? 'rotateY(180deg)' : '';
  b.setAttribute('aria-pressed', String(on)); b.textContent = on ? 'Show question' : 'Show answer';
  box.querySelector('.twq').inert = on; box.querySelector('.twa').inert = !on;
});

03. Tailwind Team Flip Card

TailwindProfile

A team member card with an initials avatar and role on the front, and a short bio with two links on the back. Arbitrary 3D utilities handle the flip, and focus-within keeps the back visible while a keyboard user tabs through its links.

View code

<div tabindex="0" aria-label="Tom Reyes, Lead developer" class="group h-72 w-56 rounded-3xl outline-none [perspective:1000px] focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-4">
  <div class="relative h-full w-full transition-transform duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)] group-focus-within:[transform:rotateY(180deg)] motion-reduce:transition-none">
    <div class="absolute inset-0 grid place-content-center justify-items-center gap-1 rounded-3xl bg-white p-6 text-center shadow-xl shadow-slate-900/10 [backface-visibility:hidden]"><span class="mb-3 grid h-20 w-20 place-items-center rounded-full bg-gradient-to-br from-sky-500 to-indigo-500 text-2xl font-extrabold text-white">TR</span><b class="text-lg text-slate-900">Tom Reyes</b><span class="text-sm text-slate-500">Lead developer</span></div>
    <div class="absolute inset-0 grid place-content-center justify-items-center gap-3 rounded-3xl bg-slate-900 p-6 text-center text-slate-300 [backface-visibility:hidden] [transform:rotateY(180deg)]"><p class="text-sm leading-relaxed">Builds fast storefronts and keeps the checkout calm on sale days.</p><nav aria-label="Tom's links" class="flex gap-2"><a href="#" class="rounded-lg border border-slate-600 px-3 py-1.5 text-xs font-semibold text-white">GitHub</a><a href="#" class="rounded-lg border border-slate-600 px-3 py-1.5 text-xs font-semibold text-white">Email</a></nav></div>
  </div>
</div>

04. Tailwind Vertical Flip

Tailwind3D

A product tile that flips top over bottom using rotateX instead of rotateY. Only the rotation axis changes from the side-flip version, which shows how easily Tailwind's arbitrary transform values can be adapted.

View code

<div tabindex="0" aria-label="Oak serving board, focus for care details" class="group h-64 w-56 rounded-2xl outline-none [perspective:1000px] focus-visible:ring-2 focus-visible:ring-emerald-300">
  <div class="relative h-full w-full transition-transform duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateX(180deg)] group-focus-within:[transform:rotateX(180deg)] motion-reduce:transition-none">
    <div class="absolute inset-0 flex flex-col justify-end gap-1 rounded-2xl border border-slate-700 bg-slate-900 p-5 [backface-visibility:hidden]"><span class="mb-2 h-32 rounded-xl bg-[repeating-linear-gradient(90deg,#92400e_0_6px,#b45309_6px_12px)]"></span><b class="text-white">Oak serving board</b><span class="text-sm text-slate-400">$54</span></div>
    <div class="absolute inset-0 flex flex-col justify-center gap-2 rounded-2xl bg-emerald-950 p-5 text-sm leading-relaxed text-emerald-100 [backface-visibility:hidden] [transform:rotateX(180deg)]"><b class="text-white">Care</b><p>Oil monthly with food-safe oil. Hand wash only. Never soak.</p></div>
  </div>
</div>

05. Tailwind Reveal Card

TailwindFade

A softer alternative to flipping: on hover or focus the details layer fades in and slides up over the image. It uses group-hover: and group-focus-visible: on a link card, with motion-reduce: utilities removing the slide for people who prefer less motion.

View code

<a href="#" class="group relative block h-56 w-64 overflow-hidden rounded-2xl bg-gradient-to-br from-teal-500 to-cyan-800 text-white focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 focus-visible:outline-teal-400">
  <span class="absolute inset-0 flex flex-col justify-end p-5 transition-opacity group-hover:opacity-0 group-focus-visible:opacity-0"><b class="text-xl">Spa weekend</b><small>Two nights, all treatments</small></span>
  <span class="absolute inset-0 flex translate-y-4 flex-col justify-end gap-1 bg-slate-950 p-5 opacity-0 transition group-hover:translate-y-0 group-hover:opacity-100 group-focus-visible:translate-y-0 group-focus-visible:opacity-100 motion-reduce:translate-y-0 motion-reduce:transition-none"><b class="text-xl">Included</b><small class="leading-relaxed">Hot stone massage, sauna, breakfast and late checkout. Book now.</small></span>
</a>

06. Tailwind Stat Flip Tile

TailwindDashboard

A small dashboard tile with a headline figure on the front and a breakdown on the back. It flips on hover and keyboard focus, and the number appears on the back as well, so nothing important exists only on one face.

View code

<div tabindex="0" aria-label="Revenue this month: $18,420, focus for breakdown" class="group h-40 w-56 rounded-2xl outline-none [perspective:800px] focus-visible:ring-2 focus-visible:ring-violet-300">
  <div class="relative h-full w-full transition-transform duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)] group-focus:[transform:rotateY(180deg)] motion-reduce:transition-none">
    <div class="absolute inset-0 grid content-center gap-1 rounded-2xl border border-slate-800 bg-slate-900 p-5 [backface-visibility:hidden]"><small class="text-slate-400">Revenue this month</small><b class="text-3xl text-white">$18,420</b><span class="text-sm font-semibold text-emerald-400">&#9650; 8% vs last month</span></div>
    <div class="absolute inset-0 grid content-center gap-1 rounded-2xl border border-slate-800 bg-slate-900 p-5 text-sm text-slate-300 [backface-visibility:hidden] [transform:rotateY(180deg)]"><small class="text-slate-400">$18,420 total</small><p class="flex justify-between">Online <b class="text-white">$12,900</b></p><p class="flex justify-between">Wholesale <b class="text-white">$5,520</b></p></div>
  </div>
</div>

About these Tailwind Flip Cards

Arbitrary 3D properties

Tailwind has no built-in utilities for 3D flips, so these demos use arbitrary properties: [perspective:1000px], [transform-style:preserve-3d], [backface-visibility:hidden] and [transform:rotateY(180deg)].

Hover and focus

group-hover: and group-focus-within: apply the rotation, and the card is focusable, so keyboard users can flip it and reach links on the back.

Reduced motion

motion-reduce:transition-none removes the animation for people who ask for less motion; the card still changes face, just instantly.

A calmer alternative

The reveal card fades and slides a layer instead of rotating, which suits subtle designs and avoids large motion entirely.

Frequently asked questions

Which Tailwind version do I need?

v3.4 or v4; arbitrary properties work in both.

Which demo uses JavaScript?

Only the click flashcard.

Is there a CSS version?

Yes, see the CSS flip cards collection.