33 Tailwind CSS Card Hover Effects
24 / 33

All 33 in 33 Tailwind CSS Card Hover Effects

  1. 01Tailwind 3D Tilt & Parallax Card with Depth Layers
  2. 02Tailwind Glowing Gradient & Glassmorphic Border Card
  3. 03Tailwind Image Zoom Card with Slide-Up Content Reveal
  4. 04Tailwind 3D Flip Card (Front to Back) with backface-visibility
  5. 05Tailwind Sibling De-emphasis Pricing Grid with has-hover
  6. 06Tailwind Minimalist Elevation Card with Layered Dynamic Shadows
  7. 07Tailwind Elastic Lift Card with Spring Cubic-Bezier
  8. 08Tailwind Animated Conic Gradient Border Card with @property
  9. 09Tailwind Stacked Layer Reveal Card (Fanned Risograph Deck)
  10. 10Tailwind Holographic Foil Shimmer Card with mix-blend-mode
  11. 11Tailwind Curtain Reveal Card (Parting Velvet Halves)
  12. 12Tailwind Corner Peel Card with clip-path Triangles
  13. 13Tailwind Neon Sign Card with Layered Text-Shadow Glow
  14. 14Tailwind CRT Scanline Terminal Card with Sweeping Beam
  15. 15Tailwind Depth Parallax Landscape Card with Layer Multipliers
  16. 16Tailwind Cursor Spotlight Card with Masked Border Highlight
  17. 17Tailwind 3D Tilt Product Card with Specular Glare
  18. 18Tailwind Slide-Up Panel Card with Peek Header Swap
  19. 19Tailwind Credit Card Flip with Magnetic Strip & CVV
  20. 20Tailwind RGB Channel-Split Glitch Card
  21. 21Tailwind Rotating Conic Aura Card with Blurred Gradient Bloom
  22. 22Tailwind Blob-to-Rectangle Border Morph Card
  23. 23Tailwind Magnetic Float Orb Card with Pointer Attraction
  24. 24Tailwind Typewriter Reveal Card with Steps Animation & Caret
  25. 25Tailwind Magazine Overlay Slide Card (Full-Face Panel Takeover)
  26. 26Tailwind Breathing Film Grain Card with SVG Turbulence Noise
  27. 27Tailwind Frosted Glass Intensify Card with Deepening Backdrop Blur
  28. 28Tailwind Blueprint Reveal Card with Circular clip-path Wipe
  29. 29Tailwind Cursor-Anchored Shockwave Ripple Card
  30. 30Tailwind Color-Burn Ignition Card with Grayscale-to-Fire Hover
  31. 31Tailwind Prismatic Light Sweep Card with Screen Blend Bar
  32. 32Tailwind Book Cover Open Card with Hinged 3D Rotation
  33. 33Tailwind Drifting Aurora Ribbons Card with Blurred Gradient Bands
Pure TailwindMIT licensed

Tailwind Typewriter Reveal Card with Steps Animation & Caret

A field-journal card that types its two-line entry on hover, caret blinking, on aged grain paper. The reveal is a width animation stepped by character count — which makes it the one demo where the keyframes and the copy are coupled, and the port makes that coupling visible.

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="tch-24 w-full min-h-svh grid place-items-center bg-tch24-bg bg-[radial-gradient(circle_at_50%_50%,#e8e1d2,#c9c0ad)] font-tch24-mono p-8">
  <article tabindex="0" class="group relative w-[350px] h-[440px] rounded overflow-hidden cursor-pointer outline-none bg-tch24-paper border border-tch24-edge shadow-[0_16px_36px_rgb(60_50_30/0.25)] focus-visible:outline-2 focus-visible:outline-tch24-ink focus-visible:outline-offset-4 before:content-[''] before:absolute before:inset-0 before:pointer-events-none before:bg-[radial-gradient(rgb(120_100_70/0.06)_0.5px,transparent_0.6px)] before:bg-[length:4px_4px]">
    <div class="relative z-2 h-full p-[2.4rem] flex flex-col text-tch24-ink">
      <div class="text-[0.72rem] tracking-[0.18em] uppercase text-tch24-mut border-b border-tch24-edge pb-3 mb-6">Dispatch No. 14 — Field Log</div>
      <h2 class="font-tch24-display text-[2rem] leading-[1.15] mb-5 min-h-[4.6rem]">The Cartographer's<br>Last Letter</h2>
      <p class="font-tch24-display text-[0.95rem] leading-[1.7] w-0 overflow-hidden whitespace-nowrap border-r-2 border-r-transparent group-hover:animate-tch24-type-a group-focus-visible:animate-tch24-type-a motion-reduce:w-full motion-reduce:animate-none">They said the river had no end —</p>
      <p class="font-tch24-display text-[0.95rem] leading-[1.7] w-0 overflow-hidden whitespace-nowrap border-r-2 border-r-transparent group-hover:animate-tch24-type-b group-focus-visible:animate-tch24-type-b motion-reduce:w-full motion-reduce:animate-none">so I followed it anyway.</p>
      <div class="mt-auto text-[0.75rem] tracking-[0.1em] text-tch24-mut">— hover to type the entry —</div>
    </div>
  </article>
</section>
@import "tailwindcss";

@keyframes tch24-type {
  from {
    width: 0;
    border-right-color: var(--color-tch24-ink);
  }

  99% {
    border-right-color: var(--color-tch24-ink);
  }

  to {
    width: 100%;
    border-right-color: transparent;
  }
}

@theme {
  --color-tch24-bg: #ddd6c7;
  --color-tch24-bg: oklch(0.87 0.02 85);
  --color-tch24-paper: #f7f2e7;
  --color-tch24-paper: oklch(0.96 0.015 85);
  --color-tch24-edge: #d8cfba;
  --color-tch24-edge: oklch(0.85 0.02 85);
  --color-tch24-ink: #2c2419;
  --color-tch24-ink: oklch(0.26 0.02 70);
  --color-tch24-mut: #8a7a5a;
  --color-tch24-mut: oklch(0.57 0.04 80);
  --font-tch24-mono: 'Courier Prime', ui-monospace, monospace;
  --font-tch24-display: 'Special Elite', ui-monospace, monospace;
  --animate-tch24-type-a: tch24-type 2.2s steps(32) forwards;
  --animate-tch24-type-b: tch24-type 1.8s steps(24) 2.2s forwards;
}

.tch-24 {
  width: 100%;
  min-height: 100svh;
}

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";

@keyframes tch24-type {
  from {
    width: 0;
    border-right-color: var(--color-tch24-ink);
  }

  99% {
    border-right-color: var(--color-tch24-ink);
  }

  to {
    width: 100%;
    border-right-color: transparent;
  }
}

@theme {
  --color-tch24-bg: #ddd6c7;
  --color-tch24-bg: oklch(0.87 0.02 85);
  --color-tch24-paper: #f7f2e7;
  --color-tch24-paper: oklch(0.96 0.015 85);
  --color-tch24-edge: #d8cfba;
  --color-tch24-edge: oklch(0.85 0.02 85);
  --color-tch24-ink: #2c2419;
  --color-tch24-ink: oklch(0.26 0.02 70);
  --color-tch24-mut: #8a7a5a;
  --color-tch24-mut: oklch(0.57 0.04 80);
  --font-tch24-mono: 'Courier Prime', ui-monospace, monospace;
  --font-tch24-display: 'Special Elite', ui-monospace, monospace;
  --animate-tch24-type-a: tch24-type 2.2s steps(32) forwards;
  --animate-tch24-type-b: tch24-type 1.8s steps(24) 2.2s forwards;
}

.tch-24 {
  width: 100%;
  min-height: 100svh;
}
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=Special+Elite&family=Courier+Prime:wght@400;700&display=swap">

What changed in the port

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

  • Two --animate-* entries carrying their own step counts and delays put the whole typing sequence in one readable block — the CSS original spread the same information across three hover rules.
  • The caret is folded into the type keyframe rather than running as a second infinite blink: it stays visible while the line grows and vanishes when it completes, which is what a real typewriter does.
  • UI change from the CSS original: focusable card that types on group-focus-visible:, step counts corrected to the actual character counts, and reduced motion now shows the completed text instead of leaving the lines at width:0 — a real content bug in the original.
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 Typewriter Reveal Card with Steps Animation & Caret
Source: https://codefronts.com/motion/tailwind-css-card-hover-effects/tailwind-typewriter-reveal-card/

A field-journal card that types its two-line entry on hover, caret blinking, on aged grain paper. The reveal is a width animation stepped by character count &mdash; which makes it the one demo where the keyframes and the copy are coupled, and the port makes that coupling visible.
## HTML
```html
<section class="tch-24 w-full min-h-svh grid place-items-center bg-tch24-bg bg-[radial-gradient(circle_at_50%_50%,#e8e1d2,#c9c0ad)] font-tch24-mono p-8">
  <article tabindex="0" class="group relative w-[350px] h-[440px] rounded overflow-hidden cursor-pointer outline-none bg-tch24-paper border border-tch24-edge shadow-[0_16px_36px_rgb(60_50_30/0.25)] focus-visible:outline-2 focus-visible:outline-tch24-ink focus-visible:outline-offset-4 before:content-[''] before:absolute before:inset-0 before:pointer-events-none before:bg-[radial-gradient(rgb(120_100_70/0.06)_0.5px,transparent_0.6px)] before:bg-[length:4px_4px]">
    <div class="relative z-2 h-full p-[2.4rem] flex flex-col text-tch24-ink">
      <div class="text-[0.72rem] tracking-[0.18em] uppercase text-tch24-mut border-b border-tch24-edge pb-3 mb-6">Dispatch No. 14 — Field Log</div>
      <h2 class="font-tch24-display text-[2rem] leading-[1.15] mb-5 min-h-[4.6rem]">The Cartographer's<br>Last Letter</h2>
      <p class="font-tch24-display text-[0.95rem] leading-[1.7] w-0 overflow-hidden whitespace-nowrap border-r-2 border-r-transparent group-hover:animate-tch24-type-a group-focus-visible:animate-tch24-type-a motion-reduce:w-full motion-reduce:animate-none">They said the river had no end —</p>
      <p class="font-tch24-display text-[0.95rem] leading-[1.7] w-0 overflow-hidden whitespace-nowrap border-r-2 border-r-transparent group-hover:animate-tch24-type-b group-focus-visible:animate-tch24-type-b motion-reduce:w-full motion-reduce:animate-none">so I followed it anyway.</p>
      <div class="mt-auto text-[0.75rem] tracking-[0.1em] text-tch24-mut">— hover to type the entry —</div>
    </div>
  </article>
</section>
```
## CSS
```css
@import "tailwindcss";

@keyframes tch24-type {
  from {
    width: 0;
    border-right-color: var(--color-tch24-ink);
  }

  99% {
    border-right-color: var(--color-tch24-ink);
  }

  to {
    width: 100%;
    border-right-color: transparent;
  }
}

@theme {
  --color-tch24-bg: #ddd6c7;
  --color-tch24-bg: oklch(0.87 0.02 85);
  --color-tch24-paper: #f7f2e7;
  --color-tch24-paper: oklch(0.96 0.015 85);
  --color-tch24-edge: #d8cfba;
  --color-tch24-edge: oklch(0.85 0.02 85);
  --color-tch24-ink: #2c2419;
  --color-tch24-ink: oklch(0.26 0.02 70);
  --color-tch24-mut: #8a7a5a;
  --color-tch24-mut: oklch(0.57 0.04 80);
  --font-tch24-mono: 'Courier Prime', ui-monospace, monospace;
  --font-tch24-display: 'Special Elite', ui-monospace, monospace;
  --animate-tch24-type-a: tch24-type 2.2s steps(32) forwards;
  --animate-tch24-type-b: tch24-type 1.8s steps(24) 2.2s forwards;
}

.tch-24 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

The reveal is a width, stepped. Each line sits at w-0 with overflow-hidden whitespace-nowrap. The keyframe grows width to 100% over a steps(34) curve, so the text appears in 34 discrete jumps — one per character. Get the step count wrong and the illusion breaks: too few and characters arrive in clumps, too many and it smooths into a wipe.

The caret is a border. border-r-2 on the line element, blinked by toggling its colour in a second keyframe. No extra element, and it sits exactly at the text's growing edge for free.

Sequencing lives in the token. The second line's --animate-* entry includes its own 2.2s delay, so line two starts when line one finishes. The order is declared once, in the theme, rather than in two competing delay- utilities.

Make it yours

  • Speed: the duration in each --animate-* entry. Keep duration and step count proportional or the rhythm breaks.
  • Caret rate: 0.6s reads calm, 0.3s urgent.
  • Add a third line by copying a theme entry and summing the previous delays.

Gotchas — read before shipping

  • steps(n) must match the line's actual character count, and changing the copy means changing the keyframe. This coupling is inherent to the technique, not to the port.
  • ch-based typing only looks right in a monospace or typewriter face; proportional fonts jump unevenly.
  • motion-reduce: must reveal the text, not hide it. An empty card is a content bug dressed as an accessibility feature.
  • Screen readers read the full string at rest regardless — correct, and not something to fight.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Keyframes, steps() timing and ch units are universally supported; the floor is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

prefers-reduced-motiontw ↗

Arbitraryneeds bracket syntax

animation delaytw ↗

Plain CSSno Tailwind surface

@keyframestw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →