Building a whole Tailwind app, not just this component?
You just browsed 23 Tailwind flip cards. Untitled UI Pro unlocks 5,000+ components and sections and 250+ page examples for React, styled with Tailwind CSS v4. One licence is a one-time $349 with lifetime updates; teams start at $999.
The reference-grade flip: a product render on the front, an eight-cell specification grid and an Add to Cart CTA on the back. The port's win is the trigger — group-hover:, group-has-checked: and group-has-[:focus-visible]: stack on one element, so the same card answers a mouse, a thumb and a Tab key with one transform.
A SaaS pricing tier that lifts from its base rather than spinning around its centre: the top edge swings toward the camera on rotateX while the bottom stays anchored, revealing the full feature ledger. The gradient price survives the port as bg-linear-135 bg-clip-text text-transparent, three utilities where the CSS needed four prefixed declarations.
A holiday gift card whose back holds a redeemable coupon code and a real copy button. Drift animation becomes an @theme--animate-* entry (so animate-tfc03-drift is a utility), and the copy confirmation is announced through an aria-live region rather than by mutating the code text — which is what the CSS original did, silently destroying the value a screen-reader user was about to read.
A staff profile whose back holds the bio, social links and a mailto action. The flip is a keyframed scale-and-turn rather than a plain spin — the card shrinks slightly at 90° and settles a hair oversized, so it reads as stepping forward to introduce itself. Crucially, the port makes those back-face links reachable: on the CSS original they lived behind a hover state a touch device can never hold.
A case-study card whose back is a proficiency ledger: five labelled meters that fill as the card turns. The port fixes the original's quiet accessibility hole — a bar whose only value was an inline width percentage now carries role="progressbar" with real aria-valuenow, so the number is available to a screen reader and not just to sighted users.
A vocabulary card: word and phonetics on the front, definition, example sentence and mnemonic on the back. The port adds the thing every flashcard actually needs and the CSS version lacked — a keyboard flip, because study decks are driven from the keyboard, not the mouse. Japanese text now carries lang="ja" so screen readers and font stacks both pick the right engine.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A trivia question with four options on the front and the answer, context and score on the back. The port resolves the CSS original's stated conflict head-on: options were divs with hover highlights that fought the card's own hover flip. Here they are real radio inputs, so a choice can be made before the reveal — which is what a quiz card is for.
A legendary-rarity character card: inline-SVG art and ability slots on the front, a four-stat ledger and lore on the back. The turn pops 60px toward the camera at its midpoint while a gold aura blooms behind — and the aura deliberately lives on the scene, not the card, because a filter or shadow on a preserve-3d element disables backface culling in Chromium and collapses the whole illusion.
A photograph that folds down from its top edge like peeling back a Polaroid, revealing location, EXIF, tags and a download action. The scrim — the gradient that keeps overlay text readable over any sky — survives the port as a single bg-linear-to-t utility, and the whole thing is now a <figure> with a real caption.
A video entry: poster, runtime badge and channel row on the front; description, three stats and a three-lesson playlist on the back. The port swaps the fixed 210px poster for aspect-video, which is the utility layer doing something the hand-written CSS quietly never did — guaranteeing the thumbnail's ratio at any card width.
A customer quote with a five-star rating on the front and the reviewer's full profile plus a per-category breakdown on the back. The port makes the quote a real <blockquote> with a <cite>, and gives every star row an aria-label — five Unicode glyphs announce as "black star black star black star…" otherwise, which is the collection's most common accessibility defect.
A landscape name card with a holographic edge strip; the back carries phone, email and office as real tel: and mailto: links beside a QR panel. The port turns three styled divs into actionable links and marks the card up as an h-card microformat, so a contact scraper gets structured data rather than decorated text.
The one card in the set with no 3D at all: the front slides out left while the back slides in from the right, like pulling a card from a file. It proves the pattern is about the reveal, not the rotation — and because there is no preserve-3d, the frosted price tag's backdrop-blur actually works, which it would not inside a 3D context in Firefox.
Four numbered phases, each flipping to its task list and duration. The port's structural win is deleting eight :nth-child colour rules: in utilities each card simply states its own palette, so reordering the steps — or dropping one — cannot silently recolour the rest of the sequence.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
The axis study: identical machinery to a horizontal flip with rotateY swapped for rotateX in exactly two places. Written as utilities, those two places are both visible in the class list — which is the point of the demo, because forgetting the second one is what renders the back face upside-down.
The explicitly scripted variant: no hover trigger at all, a real <button> that owns aria-expanded, and the flipped state persisted to localStorage so a reload does not throw the reader back to the front. State lives in a data-flipped attribute, which Tailwind reads with data-flipped: — no .is-flipped class, no string matching in the stylesheet.
The CMS-safe variant: no pixel heights anywhere. Both faces live in the same grid cell via col-start-1 row-start-1, so the taller one sets the card's height and content of any length fits. The trade is real — this is a cross-fade with a rotation flourish, not a true 3D turn — and the port fixes the technique's accessibility hole by toggling aria-hidden on the face that is not showing.
Six portfolio cards in a grid that reflows 3→2→1 with one auto-fit track, each holding its own perspective so no card at the edge of a wide row skews. Every card flips independently, which turns the grid from a hover toy into something you can actually read: open three, compare them, tab through the rest.
A watch card that opens like a book: the back panel is hinged at the card's right edge and swings in from rotateY(-90deg) rather than spinning around the centre. It is the collection's one demo that deliberately sets backface-visibility: visible — the panel never passes 90° relative to the viewer, so hiding its back face would hide the panel itself.
The collection's one light-theme card, and its one diagonal axis: rotate3d(1,1,0,180deg) twists it corner to corner as though you grabbed the top-left and bottom-right and turned. The airmail border is a masked repeating gradient — three arbitrary properties that Tailwind rightly has no scale for, sitting next to two dozen ordinary utilities.
A reveal with no rotation at all: the cover shrinks through clip-path: circle(0%) while the tracklist opens from the centre, like a camera aperture. One animated property per face, GPU-composited, and cheaper than a 3D turn — and the port closes the original's own noted gap by putting aria-hidden on the clipped face.
A concert ticket that bi-folds: the left half turns around its right edge, the stub turns around its left, and the two backs meet in the middle. The whole trick is a shared perspective on one ancestor — two halves in one vanishing-point space — which is exactly the mistake the original's gotcha list warns about and which the utility version makes structurally obvious.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A reward card whose surface peels away diagonally: a four-point clip-path polygon collapses toward the top-left corner, wiping the scratch layer off the prize underneath. Stars fade in on staggered delays once the wipe is nearly done. No 3D, no rotation — and no hover-only trap, because a reward you cannot claim on a phone is not a reward.
FAQ
Frequently asked questions
How does a Tailwind flip card actually flip in 3D?
Every 3D card here is three nested layers. The outer wrapper sets perspective so the rotation has real depth instead of looking flat. The middle layer carries transform-style: preserve-3d plus the transition, and it is what actually rotates — on hover or focus it gains rotate-y-180. The two faces are stacked with absolute inset-0 and both carry backface-visibility: hidden; the back is pre-rotated rotate-y-180 so it reads correctly once the parent turns. Demo 01 is the reference build. In Tailwind you reach these through arbitrary values like [transform-style:preserve-3d] and [transform:rotateY(180deg)], or the first-class rotate-y-180 and transform-3d utilities. Omit the perspective and the card still swaps faces, but with no sense of turning.
Why is the back of my flip card showing through, or its text rendering mirrored?
The classic bug is the back face bleeding through the front, or its text appearing reversed. Both trace to two lines. Every face needs backface-visibility: hidden so the side pointing away is culled; without it you see a faint reversed copy of the back through the front. And the back panel must itself be pre-rotated with rotate-y-180 — forget that and the back is visible but mirrored, because the parent's rotateY(180deg) flips its contents left-to-right. A third gotcha: the rotating element must hold transform-style: preserve-3d, not the faces. If faces flatten mid-turn, preserve-3d is on the wrong layer. Demo 15 uses identical machinery with rotateX for a top-to-bottom flip, so the same three rules apply to vertical cards.
How do I make a flip card work for keyboard and touch users, not just mouse hover?
A hover-only flip is invisible to keyboard and touch users, so most cards here pair hover: with focus-within: (or focus: on a focusable wrapper) to trigger on tab-focus too. Demo 01 adds tap and keyboard reveal; demo 16 drops hover entirely and uses a real <button> that toggles aria-pressed and owns the flip state — the most robust pattern for assistive tech. If the back holds interactive content — links, a copy button, an <a> mailto — set the hidden front face to pointer-events-none once flipped, otherwise focus lands on off-screen controls behind the visible face. Honour prefers-reduced-motion as well: swap the rotate transition for an instant face-swap so users prone to motion sickness are not spun.
When should I not use a 3D flip card?
Skip a fixed-height 3D flip when the two faces hold different amounts of content — a short front and a long back. Because both faces are absolute inset-0, the card needs a declared height, and CMS-driven copy will overflow or leave dead space. Demo 17 is the fix: both faces share one CSS Grid cell via col-start-1 row-start-1, so the card sizes to whichever face is taller with no pixel heights at all. Reconsider 3D on primary content you need scannable or printed too — the back face is in the DOM but visually hidden, and burying key text behind a gesture hurts usability. And on touch-only layouts a hover: flip never fires; use the click-to-flip pattern from demo 16 or a non-3D reveal like demo 13's slide instead.
How do I flip a card vertically or on a diagonal instead of the usual left-right turn?
Horizontal is just the default axis. Demo 15 swaps rotateY for rotateX so the card hinges top-to-bottom; every other line — perspective, preserve-3d, the pre-rotated back — stays identical, except the back is pre-rotated rotateX(180deg). Demo 20 tumbles corner-to-corner with rotate3d(1,1,0,180deg). Demo 19 hinges the back panel at the card's right edge like a book cover rather than spinning through the centre. The one thing that changes with axis is transform-origin: a centre flip needs no override, but the book-open unfold and the bi-fold ticket in demo 22 set the origin to an edge so each panel swings from its hinge instead of its middle.
Can I build a reveal card without any 3D rotation at all?
Not every reveal is a rotation, which sidesteps every backface and perspective concern. Demo 13 has no 3D — the front slides out left while the back slides in from the right using translate-x transitions. Demo 21 shrinks the cover through clip-path: circle(0%) to open an iris over the panel beneath. Demo 23 collapses a four-point clip-path polygon toward one corner like scratching off a ticket. Reach for these when you want a reveal that works without perspective, animates cheaply on the compositor, or degrades gracefully — an unsupported clip-path simply shows the full card, whereas a broken 3D flip can strand a visitor on a blank back face with no way to see the front.
Can the back of a flip card hold working buttons and links?
Yes — the back face can carry real interactive controls, not just text. Demo 03 puts a working copy button on a gift card that writes the coupon code to the clipboard via navigator.clipboard.writeText. Demo 12 lists phone, email and office as real <a> links with tel: and mailto: hrefs. The catch is timing: while the front is showing, the back's controls are still in the DOM and, left alone, still focusable and clickable through the transparent layer. Gate them — toggle pointer-events on each face with the flip state, or mark the hidden face invisible. Verify by tabbing before you flip: focus must never reach a control you cannot see. Demo 07's quiz and demo 05's skill bars follow the same reveal-then-interact contract.
Why does my flip card flicker or jitter during the turn?
Two flicker bugs recur. First, a white flash or z-index war mid-turn: that is a missing backface-visibility: hidden on one face, so both faces paint at once as they cross the ninety-degree mark. Second, a sub-pixel shimmer on text during rotation in Chrome — nudge the rotating layer onto its own compositor layer with will-change: transform or a small translateZ(0). Put perspective on the parent, never on the rotating element itself, or the depth recalculates each frame and the card appears to zoom. Keep the transition on the middle rotating layer, not on the faces — animating both individually double-triggers and stutters. Demo 18's six-card grid gives each card its own perspective context so one card's turn never skews its neighbours.
