23 Tailwind CSS Flip Cards
04 / 23

All 23 in 23 Tailwind CSS Flip Cards

  1. 01Tailwind Product Comparison Flip Card with Hover, Tap & Keyboard Reveal
  2. 02Tailwind Pricing Plan Flip Card with Gradient Price & Feature Reveal
  3. 03Tailwind Gift Card Flip with Copy-to-Clipboard Coupon Code Reveal
  4. 04Tailwind Meet the Team Flip Card with Bio, Socials & Contact Reveal
  5. 05Tailwind Portfolio Flip Card with Animated Skill Bar Proficiency Meters
  6. 06Tailwind Language Flashcard Flip with Phonetics, Example & Memory Tip
  7. 07Tailwind Trivia Quiz Flip Card with Answer Reveal & Score Readout
  8. 08Tailwind Gaming Trading Card Flip with Character Stats & Rarity Glow
  9. 09Tailwind Photo Gallery Flip Card with EXIF Metadata & Download CTA
  10. 10Tailwind Video Thumbnail Flip Card with Playlist, Stats & Watch CTA
  11. 11Tailwind Testimonial Flip Card with Star Rating & Reviewer Profile
  12. 12Tailwind Digital Business Card Flip with vCard Contacts & QR Panel
  13. 13Tailwind Restaurant Menu Card with Sliding Ingredient & Nutrition Reveal
  14. 14Tailwind Process Steps Flip Card Grid with Task Lists & Timelines
  15. 15Tailwind Vertical Axis Flip Card with rotateX Top-to-Bottom Reveal
  16. 16Tailwind Click-to-Flip Card with Persisted State & Keyboard Control
  17. 17Tailwind Auto-Height Flip Card with CSS Grid Stacking & Cross-Fade
  18. 18Tailwind Responsive Flip Card Grid with Per-Card 3D Perspective
  19. 19Tailwind Luxury Product Card with Hinged Book-Open 3D Unfold
  20. 20Tailwind Travel Postcard Flip Card with Diagonal rotate3d Twist
  21. 21Tailwind Album Card with clip-path Iris Aperture Reveal (No 3D)
  22. 22Tailwind Event Ticket Card with Bi-Fold Stub Reveal & QR Panel
  23. 23Tailwind Scratch Card with Diagonal clip-path Peel & Prize Reveal
Pure TailwindMIT licensed

Tailwind Meet the Team Flip Card with Bio, Socials & Contact Reveal

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.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="tfc-04 w-full min-h-svh grid place-items-center bg-tfc04-bg font-tfc04-sans px-5 py-10 text-tfc04-ink">
  <div class="group relative w-[300px] h-[410px] [perspective:1200px] rounded-2xl has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-tfc04-blue has-[:focus-visible]:outline-offset-4">
    <input id="tfc-04-flip" type="checkbox" class="peer sr-only">
    <label for="tfc-04-flip" class="absolute inset-0 z-20 cursor-pointer rounded-2xl"><span class="sr-only">Show Aria Chen's biography and contact links</span></label>

    <div class="relative w-full h-full [transform-style:preserve-3d] group-hover:animate-tfc04-turn group-has-checked:animate-tfc04-turn group-has-[:focus-visible]:animate-tfc04-turn motion-reduce:animate-none motion-reduce:group-has-checked:[transform:rotateY(180deg)]">

      <div class="absolute inset-0 flex flex-col items-center rounded-2xl overflow-hidden px-6 py-9 bg-linear-160 from-tfc04-panel to-tfc04-panel2 border border-tfc04-blue/20 shadow-[0_1px_2px_oklch(0_0_0/0.5),0_22px_48px_-18px_oklch(0.4_0.15_260/0.55)] [backface-visibility:hidden] [-webkit-backface-visibility:hidden]">
        <div class="mb-4 grid size-25 place-items-center overflow-hidden rounded-full border-[3px] border-tfc04-blue/40 bg-linear-135 from-tfc04-deep to-tfc04-deep2 shadow-[0_0_30px_oklch(0.6_0.18_260/0.25)]">
          <svg width="60" height="60" viewBox="0 0 60 60" aria-hidden="true"><circle cx="30" cy="22" r="14" fill="oklch(0.6 0.18 260 / 0.6)"/><ellipse cx="30" cy="54" rx="22" ry="16" fill="oklch(0.6 0.18 260 / 0.4)"/></svg>
        </div>
        <p class="mb-1.5 max-w-full truncate text-[10px] font-bold uppercase tracking-[0.15em] text-tfc04-cyan">Lead Designer</p>
        <h3 class="text-center text-[22px] font-extrabold tracking-[-0.02em] text-white">Aria Chen</h3>
        <p class="mt-1.5 rounded-full border border-tfc04-blue/20 bg-tfc04-blue/10 px-3 py-0.5 text-xs text-tfc04-muted">Product &amp; UX</p>
        <dl class="mt-6 flex gap-6 text-center">
          <div><dd class="bg-linear-135 from-tfc04-blue to-tfc04-cyan bg-clip-text text-[22px] font-extrabold tracking-[-0.02em] text-transparent">120+</dd><dt class="mt-0.5 text-[10px] uppercase tracking-[0.1em] text-tfc04-dim">Projects</dt></div>
          <div><dd class="bg-linear-135 from-tfc04-blue to-tfc04-cyan bg-clip-text text-[22px] font-extrabold tracking-[-0.02em] text-transparent">6 yrs</dd><dt class="mt-0.5 text-[10px] uppercase tracking-[0.1em] text-tfc04-dim">Experience</dt></div>
          <div><dd class="bg-linear-135 from-tfc04-blue to-tfc04-cyan bg-clip-text text-[22px] font-extrabold tracking-[-0.02em] text-transparent">98%</dd><dt class="mt-0.5 text-[10px] uppercase tracking-[0.1em] text-tfc04-dim">Rating</dt></div>
        </dl>
        <p class="mt-auto text-[10px] tracking-[0.08em] text-tfc04-dim">Hover, tap or press Space to connect &rarr;</p>
      </div>

      <div class="absolute inset-0 flex flex-col gap-4 rounded-2xl overflow-hidden p-7 bg-linear-160 from-tfc04-back to-tfc04-back2 border border-tfc04-cyan/20 shadow-[0_1px_2px_oklch(0_0_0/0.5),0_22px_48px_-18px_oklch(0.4_0.1_210/0.5)] [transform:rotateY(180deg)] [backface-visibility:hidden] [-webkit-backface-visibility:hidden]">
        <h3 class="text-[11px] font-bold uppercase tracking-[0.15em] text-tfc04-cyan">About Aria</h3>
        <p class="text-[13px] leading-[1.7] text-tfc04-ink/65 text-pretty">Aria leads design systems and cross-platform UX at NovaTech. She specialises in accessible, data-dense interfaces that scale from mobile to enterprise dashboards.</p>
        <div class="relative z-30 flex gap-2.5">
          <a href="#" class="flex min-h-11 flex-1 items-center justify-center rounded-xl border border-white/10 bg-white/4 text-[11px] font-bold tracking-[0.06em] text-tfc04-ink/70 no-underline transition-colors duration-200 hover:border-tfc04-blue/30 hover:bg-tfc04-blue/15 hover:text-tfc04-blue focus-visible:outline-2 focus-visible:outline-tfc04-cyan focus-visible:outline-offset-2">Twitter</a>
          <a href="#" class="flex min-h-11 flex-1 items-center justify-center rounded-xl border border-white/10 bg-white/4 text-[11px] font-bold tracking-[0.06em] text-tfc04-ink/70 no-underline transition-colors duration-200 hover:border-tfc04-blue/30 hover:bg-tfc04-blue/15 hover:text-tfc04-blue focus-visible:outline-2 focus-visible:outline-tfc04-cyan focus-visible:outline-offset-2">LinkedIn</a>
          <a href="#" class="flex min-h-11 flex-1 items-center justify-center rounded-xl border border-white/10 bg-white/4 text-[11px] font-bold tracking-[0.06em] text-tfc04-ink/70 no-underline transition-colors duration-200 hover:border-tfc04-blue/30 hover:bg-tfc04-blue/15 hover:text-tfc04-blue focus-visible:outline-2 focus-visible:outline-tfc04-cyan focus-visible:outline-offset-2">Dribbble</a>
        </div>
        <a href="mailto:aria@novatech.io" class="relative z-30 mt-auto flex min-h-11 items-center gap-2 rounded-xl border border-tfc04-blue/20 bg-linear-135 from-tfc04-blue/15 to-tfc04-cyan/8 px-4 text-xs text-tfc04-ink/75 no-underline transition-colors duration-200 hover:bg-tfc04-blue/25 focus-visible:outline-2 focus-visible:outline-tfc04-cyan focus-visible:outline-offset-2">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-tfc04-blue" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 7L2 7"/></svg>
          aria@novatech.io
        </a>
      </div>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tfc04-bg: #08090f;
  --color-tfc04-bg: oklch(0.14 0.015 265);
  --color-tfc04-panel: #0d1b3e;
  --color-tfc04-panel: oklch(0.22 0.07 265);
  --color-tfc04-panel2: #0a1220;
  --color-tfc04-panel2: oklch(0.17 0.03 260);
  --color-tfc04-back: #0d1117;
  --color-tfc04-back: oklch(0.17 0.01 255);
  --color-tfc04-back2: #111827;
  --color-tfc04-back2: oklch(0.2 0.025 260);
  --color-tfc04-deep: #1e3a8a;
  --color-tfc04-deep: oklch(0.35 0.14 265);
  --color-tfc04-deep2: #1e40af;
  --color-tfc04-deep2: oklch(0.4 0.17 265);
  --color-tfc04-blue: #3b82f6;
  --color-tfc04-blue: oklch(0.6 0.18 260);
  --color-tfc04-cyan: #22d3ee;
  --color-tfc04-cyan: oklch(0.78 0.13 200);
  --color-tfc04-ink: #f8fafc;
  --color-tfc04-ink: oklch(0.98 0.003 250);
  --color-tfc04-muted: #a7b4c8;
  --color-tfc04-muted: oklch(0.77 0.03 255);
  --color-tfc04-dim: #7d8899;
  --color-tfc04-dim: oklch(0.63 0.02 255);
  --font-tfc04-sans: 'Sora', system-ui, sans-serif;
  --animate-tfc04-turn: tfc04-turn 0.85s cubic-bezier(.34,1.4,.5,1) forwards;
}

@keyframes tfc04-turn {
  0% {
    transform: rotateY(0deg) scale(1);
  }

  40% {
    transform: rotateY(90deg) scale(0.85);
  }

  70% {
    transform: rotateY(160deg) scale(0.92);
  }

  100% {
    transform: rotateY(180deg) scale(1.03);
  }
}

.tfc-04 {
  width: 100%;
  min-height: 100svh;
}

@media (prefers-reduced-motion: reduce) {
  .tfc-04 * {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tfc04-bg: #08090f;
  --color-tfc04-bg: oklch(0.14 0.015 265);
  --color-tfc04-panel: #0d1b3e;
  --color-tfc04-panel: oklch(0.22 0.07 265);
  --color-tfc04-panel2: #0a1220;
  --color-tfc04-panel2: oklch(0.17 0.03 260);
  --color-tfc04-back: #0d1117;
  --color-tfc04-back: oklch(0.17 0.01 255);
  --color-tfc04-back2: #111827;
  --color-tfc04-back2: oklch(0.2 0.025 260);
  --color-tfc04-deep: #1e3a8a;
  --color-tfc04-deep: oklch(0.35 0.14 265);
  --color-tfc04-deep2: #1e40af;
  --color-tfc04-deep2: oklch(0.4 0.17 265);
  --color-tfc04-blue: #3b82f6;
  --color-tfc04-blue: oklch(0.6 0.18 260);
  --color-tfc04-cyan: #22d3ee;
  --color-tfc04-cyan: oklch(0.78 0.13 200);
  --color-tfc04-ink: #f8fafc;
  --color-tfc04-ink: oklch(0.98 0.003 250);
  --color-tfc04-muted: #a7b4c8;
  --color-tfc04-muted: oklch(0.77 0.03 255);
  --color-tfc04-dim: #7d8899;
  --color-tfc04-dim: oklch(0.63 0.02 255);
  --font-tfc04-sans: 'Sora', system-ui, sans-serif;
  --animate-tfc04-turn: tfc04-turn 0.85s cubic-bezier(.34,1.4,.5,1) forwards;
}

@keyframes tfc04-turn {
  0% {
    transform: rotateY(0deg) scale(1);
  }

  40% {
    transform: rotateY(90deg) scale(0.85);
  }

  70% {
    transform: rotateY(160deg) scale(0.92);
  }

  100% {
    transform: rotateY(180deg) scale(1.03);
  }
}

.tfc-04 {
  width: 100%;
  min-height: 100svh;
}

@media (prefers-reduced-motion: reduce) {
  .tfc-04 * {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • A keyframed flip cannot be expressed as stacked transform variants, so this is the one demo where the trigger variants apply an animate-* utility instead of a [transform:...] one — same three causes, different payload.
  • motion-reduce:group-has-checked:[transform:rotateY(180deg)] is the fallback that matters: with the animation suppressed, the card still needs to reach its flipped state, just instantly.
  • UI change from the CSS original: social links went from 10px-padded pills to 44px targets with real focus rings, the stat row became a <dl>, the role badge truncates instead of overflowing, and the whole back face is now reachable on touch.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Meet the Team Flip Card with Bio, Socials & Contact Reveal
Source: https://codefronts.com/components/tailwind-css-flip-cards/tailwind-meet-the-team-flip-card-bio-socials-contact/

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 &mdash; the card shrinks slightly at 90&deg; 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.
## HTML
```html
<section class="tfc-04 w-full min-h-svh grid place-items-center bg-tfc04-bg font-tfc04-sans px-5 py-10 text-tfc04-ink">
  <div class="group relative w-[300px] h-[410px] [perspective:1200px] rounded-2xl has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-tfc04-blue has-[:focus-visible]:outline-offset-4">
    <input id="tfc-04-flip" type="checkbox" class="peer sr-only">
    <label for="tfc-04-flip" class="absolute inset-0 z-20 cursor-pointer rounded-2xl"><span class="sr-only">Show Aria Chen's biography and contact links</span></label>

    <div class="relative w-full h-full [transform-style:preserve-3d] group-hover:animate-tfc04-turn group-has-checked:animate-tfc04-turn group-has-[:focus-visible]:animate-tfc04-turn motion-reduce:animate-none motion-reduce:group-has-checked:[transform:rotateY(180deg)]">

      <div class="absolute inset-0 flex flex-col items-center rounded-2xl overflow-hidden px-6 py-9 bg-linear-160 from-tfc04-panel to-tfc04-panel2 border border-tfc04-blue/20 shadow-[0_1px_2px_oklch(0_0_0/0.5),0_22px_48px_-18px_oklch(0.4_0.15_260/0.55)] [backface-visibility:hidden] [-webkit-backface-visibility:hidden]">
        <div class="mb-4 grid size-25 place-items-center overflow-hidden rounded-full border-[3px] border-tfc04-blue/40 bg-linear-135 from-tfc04-deep to-tfc04-deep2 shadow-[0_0_30px_oklch(0.6_0.18_260/0.25)]">
          <svg width="60" height="60" viewBox="0 0 60 60" aria-hidden="true"><circle cx="30" cy="22" r="14" fill="oklch(0.6 0.18 260 / 0.6)"/><ellipse cx="30" cy="54" rx="22" ry="16" fill="oklch(0.6 0.18 260 / 0.4)"/></svg>
        </div>
        <p class="mb-1.5 max-w-full truncate text-[10px] font-bold uppercase tracking-[0.15em] text-tfc04-cyan">Lead Designer</p>
        <h3 class="text-center text-[22px] font-extrabold tracking-[-0.02em] text-white">Aria Chen</h3>
        <p class="mt-1.5 rounded-full border border-tfc04-blue/20 bg-tfc04-blue/10 px-3 py-0.5 text-xs text-tfc04-muted">Product &amp; UX</p>
        <dl class="mt-6 flex gap-6 text-center">
          <div><dd class="bg-linear-135 from-tfc04-blue to-tfc04-cyan bg-clip-text text-[22px] font-extrabold tracking-[-0.02em] text-transparent">120+</dd><dt class="mt-0.5 text-[10px] uppercase tracking-[0.1em] text-tfc04-dim">Projects</dt></div>
          <div><dd class="bg-linear-135 from-tfc04-blue to-tfc04-cyan bg-clip-text text-[22px] font-extrabold tracking-[-0.02em] text-transparent">6 yrs</dd><dt class="mt-0.5 text-[10px] uppercase tracking-[0.1em] text-tfc04-dim">Experience</dt></div>
          <div><dd class="bg-linear-135 from-tfc04-blue to-tfc04-cyan bg-clip-text text-[22px] font-extrabold tracking-[-0.02em] text-transparent">98%</dd><dt class="mt-0.5 text-[10px] uppercase tracking-[0.1em] text-tfc04-dim">Rating</dt></div>
        </dl>
        <p class="mt-auto text-[10px] tracking-[0.08em] text-tfc04-dim">Hover, tap or press Space to connect &rarr;</p>
      </div>

      <div class="absolute inset-0 flex flex-col gap-4 rounded-2xl overflow-hidden p-7 bg-linear-160 from-tfc04-back to-tfc04-back2 border border-tfc04-cyan/20 shadow-[0_1px_2px_oklch(0_0_0/0.5),0_22px_48px_-18px_oklch(0.4_0.1_210/0.5)] [transform:rotateY(180deg)] [backface-visibility:hidden] [-webkit-backface-visibility:hidden]">
        <h3 class="text-[11px] font-bold uppercase tracking-[0.15em] text-tfc04-cyan">About Aria</h3>
        <p class="text-[13px] leading-[1.7] text-tfc04-ink/65 text-pretty">Aria leads design systems and cross-platform UX at NovaTech. She specialises in accessible, data-dense interfaces that scale from mobile to enterprise dashboards.</p>
        <div class="relative z-30 flex gap-2.5">
          <a href="#" class="flex min-h-11 flex-1 items-center justify-center rounded-xl border border-white/10 bg-white/4 text-[11px] font-bold tracking-[0.06em] text-tfc04-ink/70 no-underline transition-colors duration-200 hover:border-tfc04-blue/30 hover:bg-tfc04-blue/15 hover:text-tfc04-blue focus-visible:outline-2 focus-visible:outline-tfc04-cyan focus-visible:outline-offset-2">Twitter</a>
          <a href="#" class="flex min-h-11 flex-1 items-center justify-center rounded-xl border border-white/10 bg-white/4 text-[11px] font-bold tracking-[0.06em] text-tfc04-ink/70 no-underline transition-colors duration-200 hover:border-tfc04-blue/30 hover:bg-tfc04-blue/15 hover:text-tfc04-blue focus-visible:outline-2 focus-visible:outline-tfc04-cyan focus-visible:outline-offset-2">LinkedIn</a>
          <a href="#" class="flex min-h-11 flex-1 items-center justify-center rounded-xl border border-white/10 bg-white/4 text-[11px] font-bold tracking-[0.06em] text-tfc04-ink/70 no-underline transition-colors duration-200 hover:border-tfc04-blue/30 hover:bg-tfc04-blue/15 hover:text-tfc04-blue focus-visible:outline-2 focus-visible:outline-tfc04-cyan focus-visible:outline-offset-2">Dribbble</a>
        </div>
        <a href="mailto:aria@novatech.io" class="relative z-30 mt-auto flex min-h-11 items-center gap-2 rounded-xl border border-tfc04-blue/20 bg-linear-135 from-tfc04-blue/15 to-tfc04-cyan/8 px-4 text-xs text-tfc04-ink/75 no-underline transition-colors duration-200 hover:bg-tfc04-blue/25 focus-visible:outline-2 focus-visible:outline-tfc04-cyan focus-visible:outline-offset-2">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-tfc04-blue" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 7L2 7"/></svg>
          aria@novatech.io
        </a>
      </div>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tfc04-bg: #08090f;
  --color-tfc04-bg: oklch(0.14 0.015 265);
  --color-tfc04-panel: #0d1b3e;
  --color-tfc04-panel: oklch(0.22 0.07 265);
  --color-tfc04-panel2: #0a1220;
  --color-tfc04-panel2: oklch(0.17 0.03 260);
  --color-tfc04-back: #0d1117;
  --color-tfc04-back: oklch(0.17 0.01 255);
  --color-tfc04-back2: #111827;
  --color-tfc04-back2: oklch(0.2 0.025 260);
  --color-tfc04-deep: #1e3a8a;
  --color-tfc04-deep: oklch(0.35 0.14 265);
  --color-tfc04-deep2: #1e40af;
  --color-tfc04-deep2: oklch(0.4 0.17 265);
  --color-tfc04-blue: #3b82f6;
  --color-tfc04-blue: oklch(0.6 0.18 260);
  --color-tfc04-cyan: #22d3ee;
  --color-tfc04-cyan: oklch(0.78 0.13 200);
  --color-tfc04-ink: #f8fafc;
  --color-tfc04-ink: oklch(0.98 0.003 250);
  --color-tfc04-muted: #a7b4c8;
  --color-tfc04-muted: oklch(0.77 0.03 255);
  --color-tfc04-dim: #7d8899;
  --color-tfc04-dim: oklch(0.63 0.02 255);
  --font-tfc04-sans: 'Sora', system-ui, sans-serif;
  --animate-tfc04-turn: tfc04-turn 0.85s cubic-bezier(.34,1.4,.5,1) forwards;
}

@keyframes tfc04-turn {
  0% {
    transform: rotateY(0deg) scale(1);
  }

  40% {
    transform: rotateY(90deg) scale(0.85);
  }

  70% {
    transform: rotateY(160deg) scale(0.92);
  }

  100% {
    transform: rotateY(180deg) scale(1.03);
  }
}

.tfc-04 {
  width: 100%;
  min-height: 100svh;
}

@media (prefers-reduced-motion: reduce) {
  .tfc-04 * {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}
```

How this works

A keyframe, not a transition. A transition can only interpolate between two transforms; the scale dip at 90° needs a third and fourth stop, so the turn is @keyframes tfc04-turn registered as --animate-tfc04-turn. Registering it in @theme is what makes animate-tfc04-turn exist as a utility — a bare @keyframes block gives you nothing to write in the class list.

Touch reachability is the real fix. Hover-only social links are unusable on a phone: the finger that would tap them is also the thing holding the flip. With the checkbox trigger the card stays turned after a tap, and the links — at relative z-30 — sit above the flip overlay, so the second tap hits the link.

The avatar stays inline SVG. Zero requests, no broken-image state, and no overflow-hidden on a face is needed to crop it.

Make it yours

  • Palette is two tokens: --color-tfc04-blue and --color-tfc04-cyan drive the ring, badges, stat gradient and contact tile.
  • Add a stat by duplicating one cell — the flex row reflows, and gap-6 keeps the rhythm.
  • Swap the SVG silhouette for a photo: <img class="size-full object-cover"> inside the existing ring div, no other change.
  • Slow the entrance: the token's .85s is the only duration in play.

Gotchas — read before shipping

  • Animations with forwards fill hold the last keyframe, so the resting state must be the LAST frame of the turn, not the first. Reversing the keyframe list silently leaves the card face-down.
  • Social links must not be the flip target. They sit above the label overlay at z-30; drop that and every tap on a link turns the card instead of following the href.
  • Long role strings overflow a 300px card. truncate on the badge is one utility and prevents the layout from breaking on "Senior Principal Design Systems Lead".
  • animate-* and a competing transition-transform on the same element fight each other. This card uses the animation only — there is no transition utility on it.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Inline SVG and CSS animation are universal; the floor is Tailwind v4's sheet plus :has() for the tap and keyboard paths.

Techniques used in this demo

Utilitiesfirst-class utility or variant

3D transforms (perspective + preserve-3d)tw ↗:has()tw ↗:focus-visibletw ↗prefers-reduced-motiontw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗

Plain CSSno Tailwind surface

@keyframestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →