23 Tailwind CSS Flip Cards
07 / 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 Trivia Quiz Flip Card with Answer Reveal & Score Readout

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.

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-07 w-full min-h-svh grid place-items-center bg-tfc07-bg font-tfc07-sans px-5 py-10 text-tfc07-ink">
  <div class="group relative w-[360px] max-w-full h-[440px] [perspective:1200px] rounded-3xl has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-tfc07-amber has-[:focus-visible]:outline-offset-4">
    <input id="tfc-07-flip" type="checkbox" class="peer sr-only">
    <label for="tfc-07-flip" class="absolute inset-0 z-20 cursor-pointer rounded-3xl"><span class="sr-only">Reveal the answer to question 7</span></label>

    <div class="relative w-full h-full transition-transform duration-700 ease-[cubic-bezier(.4,0,.2,1)] [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)] group-has-checked:[transform:rotateY(180deg)] group-has-[:focus-visible]:[transform:rotateY(180deg)] motion-reduce:transition-none">

      <div class="absolute inset-0 flex flex-col items-center rounded-3xl overflow-hidden px-7 py-9 bg-linear-145 from-tfc07-panel to-tfc07-panel2 border border-tfc07-yellow/25 shadow-[0_1px_2px_oklch(0_0_0/0.5),0_22px_48px_-18px_oklch(0.6_0.15_85/0.3)] [backface-visibility:hidden] [-webkit-backface-visibility:hidden] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_50%_0%,oklch(0.78_0.16_85/0.12),transparent_60%)]">
        <span aria-hidden="true" class="absolute top-5 right-6 text-[80px] font-black italic leading-none text-tfc07-yellow/8">Q7</span>
        <p class="relative z-1 flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-[0.15em] text-tfc07-amber"><span class="size-1.5 rounded-full bg-tfc07-amber"></span>Space &amp; Astronomy</p>
        <p role="img" aria-label="Difficulty: 3 of 5" class="relative z-1 mt-1.5 flex gap-1 text-sm text-tfc07-yellow"><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span class="opacity-20">&#9733;</span><span class="opacity-20">&#9733;</span></p>
        <h2 class="relative z-1 mt-6 text-center text-xl font-bold leading-[1.45] tracking-[-0.01em] text-white text-pretty">Which planet in our solar system has the most known natural moons?</h2>
        <fieldset class="relative z-30 mt-7 flex w-full flex-col gap-2.5">
          <legend class="sr-only">Choose an answer</legend>
          <input id="tfc-07-a" type="radio" name="tfc-07-answer" class="peer/a sr-only">
          <label for="tfc-07-a" class="flex min-h-11 cursor-pointer items-center gap-2.5 rounded-xl border border-tfc07-yellow/15 bg-white/4 px-4 text-[13px] text-tfc07-ink/70 transition-colors duration-200 hover:border-tfc07-yellow/35 hover:bg-tfc07-yellow/10 hover:text-white peer-checked/a:border-tfc07-amber peer-checked/a:bg-tfc07-amber/15 peer-checked/a:text-white peer-focus-visible/a:outline-2 peer-focus-visible/a:outline-tfc07-amber peer-focus-visible/a:outline-offset-2"><span class="grid size-5.5 shrink-0 place-items-center rounded-md bg-tfc07-yellow/15 text-[11px] font-bold text-tfc07-amber">A</span>Jupiter</label>
          <input id="tfc-07-b" type="radio" name="tfc-07-answer" class="peer/b sr-only">
          <label for="tfc-07-b" class="flex min-h-11 cursor-pointer items-center gap-2.5 rounded-xl border border-tfc07-yellow/15 bg-white/4 px-4 text-[13px] text-tfc07-ink/70 transition-colors duration-200 hover:border-tfc07-yellow/35 hover:bg-tfc07-yellow/10 hover:text-white peer-checked/b:border-tfc07-amber peer-checked/b:bg-tfc07-amber/15 peer-checked/b:text-white peer-focus-visible/b:outline-2 peer-focus-visible/b:outline-tfc07-amber peer-focus-visible/b:outline-offset-2"><span class="grid size-5.5 shrink-0 place-items-center rounded-md bg-tfc07-yellow/15 text-[11px] font-bold text-tfc07-amber">B</span>Saturn</label>
          <input id="tfc-07-c" type="radio" name="tfc-07-answer" class="peer/c sr-only">
          <label for="tfc-07-c" class="flex min-h-11 cursor-pointer items-center gap-2.5 rounded-xl border border-tfc07-yellow/15 bg-white/4 px-4 text-[13px] text-tfc07-ink/70 transition-colors duration-200 hover:border-tfc07-yellow/35 hover:bg-tfc07-yellow/10 hover:text-white peer-checked/c:border-tfc07-amber peer-checked/c:bg-tfc07-amber/15 peer-checked/c:text-white peer-focus-visible/c:outline-2 peer-focus-visible/c:outline-tfc07-amber peer-focus-visible/c:outline-offset-2"><span class="grid size-5.5 shrink-0 place-items-center rounded-md bg-tfc07-yellow/15 text-[11px] font-bold text-tfc07-amber">C</span>Uranus</label>
          <input id="tfc-07-d" type="radio" name="tfc-07-answer" class="peer/d sr-only">
          <label for="tfc-07-d" class="flex min-h-11 cursor-pointer items-center gap-2.5 rounded-xl border border-tfc07-yellow/15 bg-white/4 px-4 text-[13px] text-tfc07-ink/70 transition-colors duration-200 hover:border-tfc07-yellow/35 hover:bg-tfc07-yellow/10 hover:text-white peer-checked/d:border-tfc07-amber peer-checked/d:bg-tfc07-amber/15 peer-checked/d:text-white peer-focus-visible/d:outline-2 peer-focus-visible/d:outline-tfc07-amber peer-focus-visible/d:outline-offset-2"><span class="grid size-5.5 shrink-0 place-items-center rounded-md bg-tfc07-yellow/15 text-[11px] font-bold text-tfc07-amber">D</span>Neptune</label>
        </fieldset>
        <p class="mt-auto text-[10px] tracking-[0.08em] text-tfc07-dim">Hover, tap or press Space to reveal &rarr;</p>
      </div>

      <div class="absolute inset-0 flex flex-col items-center gap-4 rounded-3xl overflow-hidden px-7 py-9 bg-linear-145 from-tfc07-back to-tfc07-back2 border border-tfc07-green/25 shadow-[0_1px_2px_oklch(0_0_0/0.5),0_22px_48px_-18px_oklch(0.6_0.17_150/0.3)] [transform:rotateY(180deg)] [backface-visibility:hidden] [-webkit-backface-visibility:hidden] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_50%_30%,oklch(0.7_0.17_150/0.1),transparent_60%)]">
        <p class="relative z-1 text-[11px] font-bold uppercase tracking-[0.15em] text-tfc07-green">Correct answer</p>
        <span class="relative z-1 grid size-12 place-items-center rounded-full border-2 border-tfc07-green/35 bg-tfc07-green/15">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-tfc07-green" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
        </span>
        <p class="relative z-1 text-center text-[26px] font-black leading-tight tracking-[-0.02em] text-white">B &mdash; Saturn</p>
        <span class="relative z-1 h-0.5 w-15 bg-linear-to-r from-transparent via-tfc07-green/40 to-transparent"></span>
        <p class="relative z-1 text-center text-[13px] leading-[1.7] text-tfc07-ink/65 text-pretty">Saturn holds the record with 146 confirmed moons as of 2025, edging past Jupiter's 95. Saturn's moon Titan has a thick atmosphere and lakes of liquid methane.</p>
        <dl class="relative z-1 mt-auto flex gap-6 text-center">
          <div><dd class="text-[22px] font-extrabold text-tfc07-green">+10</dd><dt class="text-[10px] uppercase tracking-[0.1em] text-tfc07-dim">Points</dt></div>
          <div><dd class="text-[22px] font-extrabold text-tfc07-green">7/10</dd><dt class="text-[10px] uppercase tracking-[0.1em] text-tfc07-dim">Progress</dt></div>
        </dl>
      </div>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tfc07-bg: #0c0c00;
  --color-tfc07-bg: oklch(0.14 0.02 100);
  --color-tfc07-panel: #1a1400;
  --color-tfc07-panel: oklch(0.2 0.04 95);
  --color-tfc07-panel2: #150f00;
  --color-tfc07-panel2: oklch(0.17 0.035 95);
  --color-tfc07-back: #051a08;
  --color-tfc07-back: oklch(0.19 0.05 150);
  --color-tfc07-back2: #071a0e;
  --color-tfc07-back2: oklch(0.2 0.045 155);
  --color-tfc07-yellow: #eab308;
  --color-tfc07-yellow: oklch(0.78 0.16 90);
  --color-tfc07-amber: #f59e0b;
  --color-tfc07-amber: oklch(0.77 0.16 70);
  --color-tfc07-green: #22c55e;
  --color-tfc07-green: oklch(0.73 0.18 150);
  --color-tfc07-ink: #fefce8;
  --color-tfc07-ink: oklch(0.98 0.02 100);
  --color-tfc07-dim: #8e8a6b;
  --color-tfc07-dim: oklch(0.63 0.03 95);
  --font-tfc07-sans: 'Sora', system-ui, sans-serif;
}

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

@media (prefers-reduced-motion: reduce) {
  .tfc-07 * {
    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-tfc07-bg: #0c0c00;
  --color-tfc07-bg: oklch(0.14 0.02 100);
  --color-tfc07-panel: #1a1400;
  --color-tfc07-panel: oklch(0.2 0.04 95);
  --color-tfc07-panel2: #150f00;
  --color-tfc07-panel2: oklch(0.17 0.035 95);
  --color-tfc07-back: #051a08;
  --color-tfc07-back: oklch(0.19 0.05 150);
  --color-tfc07-back2: #071a0e;
  --color-tfc07-back2: oklch(0.2 0.045 155);
  --color-tfc07-yellow: #eab308;
  --color-tfc07-yellow: oklch(0.78 0.16 90);
  --color-tfc07-amber: #f59e0b;
  --color-tfc07-amber: oklch(0.77 0.16 70);
  --color-tfc07-green: #22c55e;
  --color-tfc07-green: oklch(0.73 0.18 150);
  --color-tfc07-ink: #fefce8;
  --color-tfc07-ink: oklch(0.98 0.02 100);
  --color-tfc07-dim: #8e8a6b;
  --color-tfc07-dim: oklch(0.63 0.03 95);
  --font-tfc07-sans: 'Sora', system-ui, sans-serif;
}

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

@media (prefers-reduced-motion: reduce) {
  .tfc-07 * {
    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;900&display=swap">

What changed in the port

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

  • Four hover-styled divs became four radio + label pairs. The selection state is now real, survives the flip, and is announced — and the hover conflict the CSS version documented as a gotcha simply stops existing.
  • The named peer syntax (peer/a, peer-checked/a:) is what lets four sibling inputs coexist under one parent without leaking state into each other.
  • UI change from the CSS original: options are 44px tall, the question is an <h2>, the watermark is aria-hidden, the star rating carries an aria-label, and the score row is a <dl>.
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 Trivia Quiz Flip Card with Answer Reveal & Score Readout
Source: https://codefronts.com/components/tailwind-css-flip-cards/tailwind-trivia-quiz-flip-card-answer-reveal-score/

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 &mdash; which is what a quiz card is for.
## HTML
```html
<section class="tfc-07 w-full min-h-svh grid place-items-center bg-tfc07-bg font-tfc07-sans px-5 py-10 text-tfc07-ink">
  <div class="group relative w-[360px] max-w-full h-[440px] [perspective:1200px] rounded-3xl has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-tfc07-amber has-[:focus-visible]:outline-offset-4">
    <input id="tfc-07-flip" type="checkbox" class="peer sr-only">
    <label for="tfc-07-flip" class="absolute inset-0 z-20 cursor-pointer rounded-3xl"><span class="sr-only">Reveal the answer to question 7</span></label>

    <div class="relative w-full h-full transition-transform duration-700 ease-[cubic-bezier(.4,0,.2,1)] [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)] group-has-checked:[transform:rotateY(180deg)] group-has-[:focus-visible]:[transform:rotateY(180deg)] motion-reduce:transition-none">

      <div class="absolute inset-0 flex flex-col items-center rounded-3xl overflow-hidden px-7 py-9 bg-linear-145 from-tfc07-panel to-tfc07-panel2 border border-tfc07-yellow/25 shadow-[0_1px_2px_oklch(0_0_0/0.5),0_22px_48px_-18px_oklch(0.6_0.15_85/0.3)] [backface-visibility:hidden] [-webkit-backface-visibility:hidden] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_50%_0%,oklch(0.78_0.16_85/0.12),transparent_60%)]">
        <span aria-hidden="true" class="absolute top-5 right-6 text-[80px] font-black italic leading-none text-tfc07-yellow/8">Q7</span>
        <p class="relative z-1 flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-[0.15em] text-tfc07-amber"><span class="size-1.5 rounded-full bg-tfc07-amber"></span>Space &amp; Astronomy</p>
        <p role="img" aria-label="Difficulty: 3 of 5" class="relative z-1 mt-1.5 flex gap-1 text-sm text-tfc07-yellow"><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span class="opacity-20">&#9733;</span><span class="opacity-20">&#9733;</span></p>
        <h2 class="relative z-1 mt-6 text-center text-xl font-bold leading-[1.45] tracking-[-0.01em] text-white text-pretty">Which planet in our solar system has the most known natural moons?</h2>
        <fieldset class="relative z-30 mt-7 flex w-full flex-col gap-2.5">
          <legend class="sr-only">Choose an answer</legend>
          <input id="tfc-07-a" type="radio" name="tfc-07-answer" class="peer/a sr-only">
          <label for="tfc-07-a" class="flex min-h-11 cursor-pointer items-center gap-2.5 rounded-xl border border-tfc07-yellow/15 bg-white/4 px-4 text-[13px] text-tfc07-ink/70 transition-colors duration-200 hover:border-tfc07-yellow/35 hover:bg-tfc07-yellow/10 hover:text-white peer-checked/a:border-tfc07-amber peer-checked/a:bg-tfc07-amber/15 peer-checked/a:text-white peer-focus-visible/a:outline-2 peer-focus-visible/a:outline-tfc07-amber peer-focus-visible/a:outline-offset-2"><span class="grid size-5.5 shrink-0 place-items-center rounded-md bg-tfc07-yellow/15 text-[11px] font-bold text-tfc07-amber">A</span>Jupiter</label>
          <input id="tfc-07-b" type="radio" name="tfc-07-answer" class="peer/b sr-only">
          <label for="tfc-07-b" class="flex min-h-11 cursor-pointer items-center gap-2.5 rounded-xl border border-tfc07-yellow/15 bg-white/4 px-4 text-[13px] text-tfc07-ink/70 transition-colors duration-200 hover:border-tfc07-yellow/35 hover:bg-tfc07-yellow/10 hover:text-white peer-checked/b:border-tfc07-amber peer-checked/b:bg-tfc07-amber/15 peer-checked/b:text-white peer-focus-visible/b:outline-2 peer-focus-visible/b:outline-tfc07-amber peer-focus-visible/b:outline-offset-2"><span class="grid size-5.5 shrink-0 place-items-center rounded-md bg-tfc07-yellow/15 text-[11px] font-bold text-tfc07-amber">B</span>Saturn</label>
          <input id="tfc-07-c" type="radio" name="tfc-07-answer" class="peer/c sr-only">
          <label for="tfc-07-c" class="flex min-h-11 cursor-pointer items-center gap-2.5 rounded-xl border border-tfc07-yellow/15 bg-white/4 px-4 text-[13px] text-tfc07-ink/70 transition-colors duration-200 hover:border-tfc07-yellow/35 hover:bg-tfc07-yellow/10 hover:text-white peer-checked/c:border-tfc07-amber peer-checked/c:bg-tfc07-amber/15 peer-checked/c:text-white peer-focus-visible/c:outline-2 peer-focus-visible/c:outline-tfc07-amber peer-focus-visible/c:outline-offset-2"><span class="grid size-5.5 shrink-0 place-items-center rounded-md bg-tfc07-yellow/15 text-[11px] font-bold text-tfc07-amber">C</span>Uranus</label>
          <input id="tfc-07-d" type="radio" name="tfc-07-answer" class="peer/d sr-only">
          <label for="tfc-07-d" class="flex min-h-11 cursor-pointer items-center gap-2.5 rounded-xl border border-tfc07-yellow/15 bg-white/4 px-4 text-[13px] text-tfc07-ink/70 transition-colors duration-200 hover:border-tfc07-yellow/35 hover:bg-tfc07-yellow/10 hover:text-white peer-checked/d:border-tfc07-amber peer-checked/d:bg-tfc07-amber/15 peer-checked/d:text-white peer-focus-visible/d:outline-2 peer-focus-visible/d:outline-tfc07-amber peer-focus-visible/d:outline-offset-2"><span class="grid size-5.5 shrink-0 place-items-center rounded-md bg-tfc07-yellow/15 text-[11px] font-bold text-tfc07-amber">D</span>Neptune</label>
        </fieldset>
        <p class="mt-auto text-[10px] tracking-[0.08em] text-tfc07-dim">Hover, tap or press Space to reveal &rarr;</p>
      </div>

      <div class="absolute inset-0 flex flex-col items-center gap-4 rounded-3xl overflow-hidden px-7 py-9 bg-linear-145 from-tfc07-back to-tfc07-back2 border border-tfc07-green/25 shadow-[0_1px_2px_oklch(0_0_0/0.5),0_22px_48px_-18px_oklch(0.6_0.17_150/0.3)] [transform:rotateY(180deg)] [backface-visibility:hidden] [-webkit-backface-visibility:hidden] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_50%_30%,oklch(0.7_0.17_150/0.1),transparent_60%)]">
        <p class="relative z-1 text-[11px] font-bold uppercase tracking-[0.15em] text-tfc07-green">Correct answer</p>
        <span class="relative z-1 grid size-12 place-items-center rounded-full border-2 border-tfc07-green/35 bg-tfc07-green/15">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-tfc07-green" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
        </span>
        <p class="relative z-1 text-center text-[26px] font-black leading-tight tracking-[-0.02em] text-white">B &mdash; Saturn</p>
        <span class="relative z-1 h-0.5 w-15 bg-linear-to-r from-transparent via-tfc07-green/40 to-transparent"></span>
        <p class="relative z-1 text-center text-[13px] leading-[1.7] text-tfc07-ink/65 text-pretty">Saturn holds the record with 146 confirmed moons as of 2025, edging past Jupiter's 95. Saturn's moon Titan has a thick atmosphere and lakes of liquid methane.</p>
        <dl class="relative z-1 mt-auto flex gap-6 text-center">
          <div><dd class="text-[22px] font-extrabold text-tfc07-green">+10</dd><dt class="text-[10px] uppercase tracking-[0.1em] text-tfc07-dim">Points</dt></div>
          <div><dd class="text-[22px] font-extrabold text-tfc07-green">7/10</dd><dt class="text-[10px] uppercase tracking-[0.1em] text-tfc07-dim">Progress</dt></div>
        </dl>
      </div>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tfc07-bg: #0c0c00;
  --color-tfc07-bg: oklch(0.14 0.02 100);
  --color-tfc07-panel: #1a1400;
  --color-tfc07-panel: oklch(0.2 0.04 95);
  --color-tfc07-panel2: #150f00;
  --color-tfc07-panel2: oklch(0.17 0.035 95);
  --color-tfc07-back: #051a08;
  --color-tfc07-back: oklch(0.19 0.05 150);
  --color-tfc07-back2: #071a0e;
  --color-tfc07-back2: oklch(0.2 0.045 155);
  --color-tfc07-yellow: #eab308;
  --color-tfc07-yellow: oklch(0.78 0.16 90);
  --color-tfc07-amber: #f59e0b;
  --color-tfc07-amber: oklch(0.77 0.16 70);
  --color-tfc07-green: #22c55e;
  --color-tfc07-green: oklch(0.73 0.18 150);
  --color-tfc07-ink: #fefce8;
  --color-tfc07-ink: oklch(0.98 0.02 100);
  --color-tfc07-dim: #8e8a6b;
  --color-tfc07-dim: oklch(0.63 0.03 95);
  --font-tfc07-sans: 'Sora', system-ui, sans-serif;
}

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

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

How this works

Options are inputs, not decorations. Each answer is a sr-only radio plus a label styled through peer-checked:border-tfc07-amber peer-checked:bg-tfc07-amber/15. Choosing an option no longer competes with the flip because the label is at z-30, above the flip overlay: tap an answer, then tap the card to check yourself.

The watermark is hidden from assistive tech. Q7 at 80px and 7% opacity is texture, not content. aria-hidden="true" says so, and the real question sits in an <h2>.

Difficulty stars carry a text alternative. Five glyphs with two dimmed is a rating a screen reader cannot infer; the group carries role="img" and an aria-label of "Difficulty: 3 of 5".

Make it yours

  • Answer key: the correct option is marked only on the back face, so shuffling the front options needs no other edit.
  • Timer-driven reveal: the state is a checkbox — setTimeout(() => cb.checked = true, 10000) and the card flips itself.
  • Difficulty: dim or brighten stars by moving opacity-20, and update the aria-label to match.
  • Retheme amber → any hue through --color-tfc07-yellow and --color-tfc07-amber; the green answer side is a separate pair on purpose.

Gotchas — read before shipping

  • Radio labels must sit above the flip overlay or every answer click turns the card instead. relative z-30 on the label, z-20 on the overlay.
  • A decorative number that is not aria-hidden is announced as &quot;Q7&quot; before the question, which is noise.
  • Keep the flip at 600ms or slower. A 300ms flip triggered by a pointer crossing the card edge shows the answer to someone who did not ask for it.
  • peer-checked: only reaches SIBLINGS after the input. Put each radio immediately before its label, or the selected style silently never applies.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Radio + peer styling works everywhere; :has() gates the tap/keyboard flip, hover works without it.

Techniques used in this demo

Utilitiesfirst-class utility or variant

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

Theme tokensset in @theme, used by a utility

oklch()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →