23 Tailwind CSS Flip Cards
12 / 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 Digital Business Card Flip with vCard Contacts & QR Panel

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.

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-12 w-full min-h-svh grid place-items-center content-center gap-4 bg-tfc12-bg font-tfc12-sans px-5 py-10 text-tfc12-ink">
  <p class="text-center text-[10px] font-semibold uppercase tracking-[0.2em] text-tfc12-dim">Digital business card &middot; hover, tap or press Space</p>
  <div class="group relative mx-auto h-[230px] w-[380px] max-w-full [perspective:1200px] rounded-2xl print:w-[85.6mm] print:h-[54mm] has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-tfc12-cyan has-[:focus-visible]:outline-offset-4">
    <input id="tfc-12-flip" type="checkbox" class="peer sr-only">
    <label for="tfc-12-flip" class="absolute inset-0 z-20 cursor-pointer rounded-2xl"><span class="sr-only">Show contact details and QR code</span></label>

    <div class="relative h-full w-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="h-card absolute inset-0 flex items-center gap-5 rounded-2xl overflow-hidden px-7 py-6 bg-linear-135 from-tfc12-panel to-tfc12-panel2 border border-tfc12-cyan/25 shadow-[0_1px_2px_oklch(0_0_0/0.5),0_20px_44px_-18px_oklch(0.5_0.12_205/0.4)] [backface-visibility:hidden] [-webkit-backface-visibility:hidden]">
        <span aria-hidden="true" class="absolute inset-y-0 right-15 w-1 bg-linear-180 from-transparent via-tfc12-cyan/40 to-transparent"></span>
        <span aria-hidden="true" class="absolute inset-y-0 right-15 w-1 bg-linear-180 from-transparent via-tfc12-violet/40 to-transparent opacity-70"></span>
        <span class="grid size-15 shrink-0 place-items-center rounded-2xl bg-linear-135 from-tfc12-cyan2 to-tfc12-teal text-[22px] font-black text-white shadow-[0_0_20px_oklch(0.65_0.13_205/0.3)]">JD</span>
        <div class="flex-1">
          <p class="p-name text-xl font-extrabold tracking-[-0.02em] text-white">James Dorian</p>
          <p class="p-job-title mt-0.5 text-[11px] font-semibold tracking-[0.06em] text-tfc12-cyan">Chief Technology Officer</p>
          <span class="my-2.5 block h-px bg-white/8"></span>
          <p class="p-org text-[13px] text-tfc12-muted">Nova Systems Inc.</p>
          <div class="mt-2 flex flex-col gap-1 text-[11px] text-tfc12-dim">
            <span class="flex items-center gap-1.5"><span class="size-1 rounded-full bg-tfc12-cyan/60"></span>+1 (415) 555-0198</span>
            <span class="flex items-center gap-1.5"><span class="size-1 rounded-full bg-tfc12-cyan/60"></span>j.dorian@novasys.io</span>
          </div>
        </div>
      </div>

      <div class="absolute inset-0 flex items-center gap-5 rounded-2xl overflow-hidden px-6 py-5 bg-linear-135 from-tfc12-back to-tfc12-back2 border border-tfc12-cyan/20 shadow-[0_1px_2px_oklch(0_0_0/0.5),0_20px_44px_-18px_oklch(0.5_0.12_205/0.4)] [transform:rotateY(180deg)] [backface-visibility:hidden] [-webkit-backface-visibility:hidden]">
        <ul class="relative z-30 flex flex-1 flex-col gap-1.5">
          <li><a href="tel:+14155550198" class="p-tel flex min-h-11 items-center gap-2.5 rounded-lg px-1 no-underline transition-colors duration-200 hover:bg-white/5 focus-visible:outline-2 focus-visible:outline-tfc12-cyan focus-visible:outline-offset-2">
            <span class="grid size-8 shrink-0 place-items-center rounded-lg border border-tfc12-cyan/20 bg-tfc12-cyan/10"><svg viewBox="0 0 24 24" class="size-3.5 fill-none stroke-tfc12-cyan stroke-[1.8]" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.43 2 2 0 0 1 3.6 1h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.6a16 16 0 0 0 6 6l.92-.92a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 21.73 16z"/></svg></span>
            <span class="flex flex-col"><span class="text-[9px] uppercase tracking-[0.1em] text-tfc12-dim">Phone</span><span class="text-xs font-semibold text-tfc12-ink/85">+1 (415) 555-0198</span></span>
          </a></li>
          <li><a href="mailto:j.dorian@novasys.io" class="u-email flex min-h-11 items-center gap-2.5 rounded-lg px-1 no-underline transition-colors duration-200 hover:bg-white/5 focus-visible:outline-2 focus-visible:outline-tfc12-cyan focus-visible:outline-offset-2">
            <span class="grid size-8 shrink-0 place-items-center rounded-lg border border-tfc12-cyan/20 bg-tfc12-cyan/10"><svg viewBox="0 0 24 24" class="size-3.5 fill-none stroke-tfc12-cyan stroke-[1.8]" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 7L2 7"/></svg></span>
            <span class="flex flex-col"><span class="text-[9px] uppercase tracking-[0.1em] text-tfc12-dim">Email</span><span class="text-xs font-semibold text-tfc12-ink/85">j.dorian@novasys.io</span></span>
          </a></li>
          <li><a href="https://maps.example.com/novasys" class="p-adr flex min-h-11 items-center gap-2.5 rounded-lg px-1 no-underline transition-colors duration-200 hover:bg-white/5 focus-visible:outline-2 focus-visible:outline-tfc12-cyan focus-visible:outline-offset-2">
            <span class="grid size-8 shrink-0 place-items-center rounded-lg border border-tfc12-cyan/20 bg-tfc12-cyan/10"><svg viewBox="0 0 24 24" class="size-3.5 fill-none stroke-tfc12-cyan stroke-[1.8]" aria-hidden="true"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></span>
            <span class="flex flex-col"><span class="text-[9px] uppercase tracking-[0.1em] text-tfc12-dim">Office</span><span class="text-xs font-semibold text-tfc12-ink/85">San Francisco &middot; Floor 22</span></span>
          </a></li>
        </ul>
        <figure class="m-0 flex shrink-0 flex-col items-center gap-1.5">
          <span class="grid size-25 place-items-center rounded-xl bg-white p-1.5">
            <svg viewBox="0 0 21 21" fill="black" class="size-full" aria-hidden="true">
              <rect x="0" y="0" width="7" height="7" fill="none" stroke="black" stroke-width="1"/><rect x="2" y="2" width="3" height="3"/>
              <rect x="14" y="0" width="7" height="7" fill="none" stroke="black" stroke-width="1"/><rect x="16" y="2" width="3" height="3"/>
              <rect x="0" y="14" width="7" height="7" fill="none" stroke="black" stroke-width="1"/><rect x="2" y="16" width="3" height="3"/>
              <rect x="8" y="0" width="1" height="1"/><rect x="10" y="0" width="1" height="1"/><rect x="12" y="0" width="1" height="1"/>
              <rect x="9" y="2" width="1" height="1"/><rect x="11" y="2" width="1" height="1"/>
              <rect x="8" y="4" width="1" height="1"/><rect x="10" y="4" width="2" height="1"/><rect x="13" y="4" width="1" height="1"/>
              <rect x="7" y="7" width="1" height="1"/><rect x="9" y="7" width="2" height="1"/><rect x="12" y="7" width="1" height="1"/>
              <rect x="7" y="9" width="2" height="1"/><rect x="11" y="9" width="1" height="1"/><rect x="13" y="9" width="1" height="1"/>
              <rect x="8" y="11" width="1" height="1"/><rect x="10" y="11" width="2" height="1"/><rect x="14" y="11" width="1" height="1"/>
              <rect x="7" y="13" width="1" height="1"/><rect x="9" y="13" width="1" height="1"/><rect x="12" y="13" width="2" height="1"/>
              <rect x="8" y="14" width="2" height="1"/><rect x="12" y="14" width="1" height="1"/><rect x="14" y="14" width="1" height="1"/>
              <rect x="9" y="16" width="1" height="1"/><rect x="11" y="16" width="3" height="1"/>
              <rect x="8" y="18" width="2" height="1"/><rect x="12" y="18" width="1" height="1"/><rect x="14" y="18" width="1" height="1"/>
              <rect x="9" y="20" width="1" height="1"/><rect x="11" y="20" width="2" height="1"/><rect x="14" y="20" width="1" height="1"/>
            </svg>
          </span>
          <figcaption class="text-[8px] uppercase tracking-[0.1em] text-tfc12-dim">Sample pattern</figcaption>
        </figure>
      </div>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tfc12-bg: #04080c;
  --color-tfc12-bg: oklch(0.12 0.01 230);
  --color-tfc12-panel: #0a1520;
  --color-tfc12-panel: oklch(0.18 0.025 240);
  --color-tfc12-panel2: #040e18;
  --color-tfc12-panel2: oklch(0.14 0.02 240);
  --color-tfc12-back: #060e18;
  --color-tfc12-back: oklch(0.15 0.02 240);
  --color-tfc12-back2: #040a12;
  --color-tfc12-back2: oklch(0.12 0.015 240);
  --color-tfc12-cyan: #06b6d4;
  --color-tfc12-cyan: oklch(0.7 0.14 205);
  --color-tfc12-cyan2: #0891b2;
  --color-tfc12-cyan2: oklch(0.6 0.12 210);
  --color-tfc12-teal: #0e7490;
  --color-tfc12-teal: oklch(0.5 0.1 215);
  --color-tfc12-violet: #8b5cf6;
  --color-tfc12-violet: oklch(0.63 0.2 295);
  --color-tfc12-ink: #f0f9ff;
  --color-tfc12-ink: oklch(0.97 0.015 230);
  --color-tfc12-muted: #9fb2c2;
  --color-tfc12-muted: oklch(0.76 0.025 235);
  --color-tfc12-dim: #7b8b99;
  --color-tfc12-dim: oklch(0.63 0.02 235);
  --font-tfc12-sans: 'Sora', system-ui, sans-serif;
}

.tfc-12 {
  width: 100%;
  min-height: 100svh;
}
/* Print: flatten the 3D context and show the front face at ID-1 card size. */

@media print {
  .tfc-12 [style],
    .tfc-12 * {
    transform: none !important;
  }

  .tfc-12 {
    min-height: auto;
    background: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tfc-12 * {
    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-tfc12-bg: #04080c;
  --color-tfc12-bg: oklch(0.12 0.01 230);
  --color-tfc12-panel: #0a1520;
  --color-tfc12-panel: oklch(0.18 0.025 240);
  --color-tfc12-panel2: #040e18;
  --color-tfc12-panel2: oklch(0.14 0.02 240);
  --color-tfc12-back: #060e18;
  --color-tfc12-back: oklch(0.15 0.02 240);
  --color-tfc12-back2: #040a12;
  --color-tfc12-back2: oklch(0.12 0.015 240);
  --color-tfc12-cyan: #06b6d4;
  --color-tfc12-cyan: oklch(0.7 0.14 205);
  --color-tfc12-cyan2: #0891b2;
  --color-tfc12-cyan2: oklch(0.6 0.12 210);
  --color-tfc12-teal: #0e7490;
  --color-tfc12-teal: oklch(0.5 0.1 215);
  --color-tfc12-violet: #8b5cf6;
  --color-tfc12-violet: oklch(0.63 0.2 295);
  --color-tfc12-ink: #f0f9ff;
  --color-tfc12-ink: oklch(0.97 0.015 230);
  --color-tfc12-muted: #9fb2c2;
  --color-tfc12-muted: oklch(0.76 0.025 235);
  --color-tfc12-dim: #7b8b99;
  --color-tfc12-dim: oklch(0.63 0.02 235);
  --font-tfc12-sans: 'Sora', system-ui, sans-serif;
}

.tfc-12 {
  width: 100%;
  min-height: 100svh;
}
/* Print: flatten the 3D context and show the front face at ID-1 card size. */

@media print {
  .tfc-12 [style],
    .tfc-12 * {
    transform: none !important;
  }

  .tfc-12 {
    min-height: auto;
    background: #fff;
  }
}

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

What changed in the port

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

  • Three contact divs became three anchors. The visual result is identical and the card became useful on a phone, which is the only device anyone actually shares a business card from.
  • h-card microformat classes coexist with utility classes in one class attribute — the same argument demo 01 makes for Microdata: structure and style do not compete for the attribute.
  • UI change from the CSS original: tappable 44px contact rows, an explicitly labelled decorative QR, a second holo strip layer for a truer iridescence, and a print block that outputs at real ID-1 card size.
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 Digital Business Card Flip with vCard Contacts & QR Panel
Source: https://codefronts.com/components/tailwind-css-flip-cards/tailwind-digital-business-card-flip-vcard-qr-panel/

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.
## HTML
```html
<section class="tfc-12 w-full min-h-svh grid place-items-center content-center gap-4 bg-tfc12-bg font-tfc12-sans px-5 py-10 text-tfc12-ink">
  <p class="text-center text-[10px] font-semibold uppercase tracking-[0.2em] text-tfc12-dim">Digital business card &middot; hover, tap or press Space</p>
  <div class="group relative mx-auto h-[230px] w-[380px] max-w-full [perspective:1200px] rounded-2xl print:w-[85.6mm] print:h-[54mm] has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-tfc12-cyan has-[:focus-visible]:outline-offset-4">
    <input id="tfc-12-flip" type="checkbox" class="peer sr-only">
    <label for="tfc-12-flip" class="absolute inset-0 z-20 cursor-pointer rounded-2xl"><span class="sr-only">Show contact details and QR code</span></label>

    <div class="relative h-full w-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="h-card absolute inset-0 flex items-center gap-5 rounded-2xl overflow-hidden px-7 py-6 bg-linear-135 from-tfc12-panel to-tfc12-panel2 border border-tfc12-cyan/25 shadow-[0_1px_2px_oklch(0_0_0/0.5),0_20px_44px_-18px_oklch(0.5_0.12_205/0.4)] [backface-visibility:hidden] [-webkit-backface-visibility:hidden]">
        <span aria-hidden="true" class="absolute inset-y-0 right-15 w-1 bg-linear-180 from-transparent via-tfc12-cyan/40 to-transparent"></span>
        <span aria-hidden="true" class="absolute inset-y-0 right-15 w-1 bg-linear-180 from-transparent via-tfc12-violet/40 to-transparent opacity-70"></span>
        <span class="grid size-15 shrink-0 place-items-center rounded-2xl bg-linear-135 from-tfc12-cyan2 to-tfc12-teal text-[22px] font-black text-white shadow-[0_0_20px_oklch(0.65_0.13_205/0.3)]">JD</span>
        <div class="flex-1">
          <p class="p-name text-xl font-extrabold tracking-[-0.02em] text-white">James Dorian</p>
          <p class="p-job-title mt-0.5 text-[11px] font-semibold tracking-[0.06em] text-tfc12-cyan">Chief Technology Officer</p>
          <span class="my-2.5 block h-px bg-white/8"></span>
          <p class="p-org text-[13px] text-tfc12-muted">Nova Systems Inc.</p>
          <div class="mt-2 flex flex-col gap-1 text-[11px] text-tfc12-dim">
            <span class="flex items-center gap-1.5"><span class="size-1 rounded-full bg-tfc12-cyan/60"></span>+1 (415) 555-0198</span>
            <span class="flex items-center gap-1.5"><span class="size-1 rounded-full bg-tfc12-cyan/60"></span>j.dorian@novasys.io</span>
          </div>
        </div>
      </div>

      <div class="absolute inset-0 flex items-center gap-5 rounded-2xl overflow-hidden px-6 py-5 bg-linear-135 from-tfc12-back to-tfc12-back2 border border-tfc12-cyan/20 shadow-[0_1px_2px_oklch(0_0_0/0.5),0_20px_44px_-18px_oklch(0.5_0.12_205/0.4)] [transform:rotateY(180deg)] [backface-visibility:hidden] [-webkit-backface-visibility:hidden]">
        <ul class="relative z-30 flex flex-1 flex-col gap-1.5">
          <li><a href="tel:+14155550198" class="p-tel flex min-h-11 items-center gap-2.5 rounded-lg px-1 no-underline transition-colors duration-200 hover:bg-white/5 focus-visible:outline-2 focus-visible:outline-tfc12-cyan focus-visible:outline-offset-2">
            <span class="grid size-8 shrink-0 place-items-center rounded-lg border border-tfc12-cyan/20 bg-tfc12-cyan/10"><svg viewBox="0 0 24 24" class="size-3.5 fill-none stroke-tfc12-cyan stroke-[1.8]" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.43 2 2 0 0 1 3.6 1h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.6a16 16 0 0 0 6 6l.92-.92a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 21.73 16z"/></svg></span>
            <span class="flex flex-col"><span class="text-[9px] uppercase tracking-[0.1em] text-tfc12-dim">Phone</span><span class="text-xs font-semibold text-tfc12-ink/85">+1 (415) 555-0198</span></span>
          </a></li>
          <li><a href="mailto:j.dorian@novasys.io" class="u-email flex min-h-11 items-center gap-2.5 rounded-lg px-1 no-underline transition-colors duration-200 hover:bg-white/5 focus-visible:outline-2 focus-visible:outline-tfc12-cyan focus-visible:outline-offset-2">
            <span class="grid size-8 shrink-0 place-items-center rounded-lg border border-tfc12-cyan/20 bg-tfc12-cyan/10"><svg viewBox="0 0 24 24" class="size-3.5 fill-none stroke-tfc12-cyan stroke-[1.8]" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 7L2 7"/></svg></span>
            <span class="flex flex-col"><span class="text-[9px] uppercase tracking-[0.1em] text-tfc12-dim">Email</span><span class="text-xs font-semibold text-tfc12-ink/85">j.dorian@novasys.io</span></span>
          </a></li>
          <li><a href="https://maps.example.com/novasys" class="p-adr flex min-h-11 items-center gap-2.5 rounded-lg px-1 no-underline transition-colors duration-200 hover:bg-white/5 focus-visible:outline-2 focus-visible:outline-tfc12-cyan focus-visible:outline-offset-2">
            <span class="grid size-8 shrink-0 place-items-center rounded-lg border border-tfc12-cyan/20 bg-tfc12-cyan/10"><svg viewBox="0 0 24 24" class="size-3.5 fill-none stroke-tfc12-cyan stroke-[1.8]" aria-hidden="true"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></span>
            <span class="flex flex-col"><span class="text-[9px] uppercase tracking-[0.1em] text-tfc12-dim">Office</span><span class="text-xs font-semibold text-tfc12-ink/85">San Francisco &middot; Floor 22</span></span>
          </a></li>
        </ul>
        <figure class="m-0 flex shrink-0 flex-col items-center gap-1.5">
          <span class="grid size-25 place-items-center rounded-xl bg-white p-1.5">
            <svg viewBox="0 0 21 21" fill="black" class="size-full" aria-hidden="true">
              <rect x="0" y="0" width="7" height="7" fill="none" stroke="black" stroke-width="1"/><rect x="2" y="2" width="3" height="3"/>
              <rect x="14" y="0" width="7" height="7" fill="none" stroke="black" stroke-width="1"/><rect x="16" y="2" width="3" height="3"/>
              <rect x="0" y="14" width="7" height="7" fill="none" stroke="black" stroke-width="1"/><rect x="2" y="16" width="3" height="3"/>
              <rect x="8" y="0" width="1" height="1"/><rect x="10" y="0" width="1" height="1"/><rect x="12" y="0" width="1" height="1"/>
              <rect x="9" y="2" width="1" height="1"/><rect x="11" y="2" width="1" height="1"/>
              <rect x="8" y="4" width="1" height="1"/><rect x="10" y="4" width="2" height="1"/><rect x="13" y="4" width="1" height="1"/>
              <rect x="7" y="7" width="1" height="1"/><rect x="9" y="7" width="2" height="1"/><rect x="12" y="7" width="1" height="1"/>
              <rect x="7" y="9" width="2" height="1"/><rect x="11" y="9" width="1" height="1"/><rect x="13" y="9" width="1" height="1"/>
              <rect x="8" y="11" width="1" height="1"/><rect x="10" y="11" width="2" height="1"/><rect x="14" y="11" width="1" height="1"/>
              <rect x="7" y="13" width="1" height="1"/><rect x="9" y="13" width="1" height="1"/><rect x="12" y="13" width="2" height="1"/>
              <rect x="8" y="14" width="2" height="1"/><rect x="12" y="14" width="1" height="1"/><rect x="14" y="14" width="1" height="1"/>
              <rect x="9" y="16" width="1" height="1"/><rect x="11" y="16" width="3" height="1"/>
              <rect x="8" y="18" width="2" height="1"/><rect x="12" y="18" width="1" height="1"/><rect x="14" y="18" width="1" height="1"/>
              <rect x="9" y="20" width="1" height="1"/><rect x="11" y="20" width="2" height="1"/><rect x="14" y="20" width="1" height="1"/>
            </svg>
          </span>
          <figcaption class="text-[8px] uppercase tracking-[0.1em] text-tfc12-dim">Sample pattern</figcaption>
        </figure>
      </div>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tfc12-bg: #04080c;
  --color-tfc12-bg: oklch(0.12 0.01 230);
  --color-tfc12-panel: #0a1520;
  --color-tfc12-panel: oklch(0.18 0.025 240);
  --color-tfc12-panel2: #040e18;
  --color-tfc12-panel2: oklch(0.14 0.02 240);
  --color-tfc12-back: #060e18;
  --color-tfc12-back: oklch(0.15 0.02 240);
  --color-tfc12-back2: #040a12;
  --color-tfc12-back2: oklch(0.12 0.015 240);
  --color-tfc12-cyan: #06b6d4;
  --color-tfc12-cyan: oklch(0.7 0.14 205);
  --color-tfc12-cyan2: #0891b2;
  --color-tfc12-cyan2: oklch(0.6 0.12 210);
  --color-tfc12-teal: #0e7490;
  --color-tfc12-teal: oklch(0.5 0.1 215);
  --color-tfc12-violet: #8b5cf6;
  --color-tfc12-violet: oklch(0.63 0.2 295);
  --color-tfc12-ink: #f0f9ff;
  --color-tfc12-ink: oklch(0.97 0.015 230);
  --color-tfc12-muted: #9fb2c2;
  --color-tfc12-muted: oklch(0.76 0.025 235);
  --color-tfc12-dim: #7b8b99;
  --color-tfc12-dim: oklch(0.63 0.02 235);
  --font-tfc12-sans: 'Sora', system-ui, sans-serif;
}

.tfc-12 {
  width: 100%;
  min-height: 100svh;
}
/* Print: flatten the 3D context and show the front face at ID-1 card size. */

@media print {
  .tfc-12 [style],
    .tfc-12 * {
    transform: none !important;
  }

  .tfc-12 {
    min-height: auto;
    background: #fff;
  }
}

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

How this works

Contacts became links. A phone number that cannot be tapped is a screenshot. Each row is now an anchor with a 44px target and a focus ring; on a phone, tapping the number dials it.

Microformats cost nothing and add machine-readability. class="h-card" on the card plus p-name / u-email / p-tel on the fields means a parser can extract a real vCard. The utility classes sit in the same attribute, which is the whole argument for keeping the structure semantic.

The QR is decorative and says so. A 21×21 hand-placed grid looks right and does not scan; it carries aria-hidden and a caption directing you to generate a real one.

Make it yours

  • Print at card size: the print:w-[85.6mm] print:h-[54mm] pair is already there — the flip flattens to the front face on paper.
  • Real QR: generate an SVG from a vCard URL with any QR library and drop it into the white panel.
  • Portrait orientation: swap w-[380px] h-[230px] for w-[230px] h-[380px] and change the back's flex-row to flex-col.
  • Animate the holo strip with a hue-cycling @theme animation for a foil shimmer.

Gotchas — read before shipping

  • A decorative QR that looks scannable is a trap. Label it, or generate a real one — users will point a camera at it.
  • The holo strip uses opaque stops; for a true foil look over a light background add mix-blend-overlay.
  • Landscape cards squeeze below 400px viewports. max-w-full plus fluid padding keeps it usable; do not pin the width.
  • tel: links need the full international format to work reliably on mobile dialers — +14155550198, not the display string.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Web NFC (for tap-to-share) is Chrome on Android only; the card itself works everywhere.

Techniques used in this demo

Utilitiesfirst-class utility or variant

3D transforms (perspective + preserve-3d)tw ↗linear gradienttw ↗:has()tw ↗:focus-visibletw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →