21 Tailwind CSS pricing tables for SaaS plan pages, product-suite marketing sites, and fintech and D2C checkouts — spanning monthly/annual and multi-currency toggles, per-seat and bundle calculators, 3D flip and tabbed layouts, animated border beams and gradient borders, glassmorphism and neumorphism, usage meters, and swipe carousels. Scoped under .tpt-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.
Related21 CSS Pricing Tables36 CSS Modals47 Tailwind CSS Toggles & Switches36 Tailwind CSS Modals
Premium template pickPartner: Cruip
Affiliate linkBuilding the whole landing page, not just this section?
You just browsed 21 Tailwind pricing tables. Cruip makes complete Tailwind CSS templates for landing pages, SaaS websites and admin dashboards, coded in HTML, React, Next.js and Vue and used by 60K+ developers. Single templates start at $49.
Cruip. We may earn a commission, at no extra cost to you.
role="switch" checkbox read by group-has-checked/p: on every element that changes.
data-swap attribute; group-data-swap/g: utilities own the whole animation, and the JS reads its timing from the utility's computed transition-duration.
<table> beneath. The unfold is v4 arbitrary values — grid-rows-[0fr] to group-has-checked/p:grid-rows-[1fr] — so the matrix animates to its natural height with no measuring.
@theme token (bg-tpt04-surface, text-tpt04-mut…), so one CSS rule re-points the tokens and the whole component crossfades. No dark: class is duplicated on any element — the palette stays a palette, and the switch is a real role="switch".
group-has-[article:hover]/g:not-hover:scale-96 — read left to right as “when any card in the grid is hovered, and this one isn't”.
padding-box / border-box trick and spun by animating one registered @property angle. The beam is a single arbitrary [background:…] utility; a blurred before: copy supplies the glow. No mask, no SVG.
translate property while hover poses use scale and rotate, so the two never fight over transform.
[--tpt08-fill:var(--color-tpt08-seed)] — and v4's before:bg-(--tpt08-fill) shorthand paints the sweep, so one class list powers three differently coloured CTAs.
oklch(L var(--tpt09-c) var(--tpt09-h)) in arbitrary utilities; registering the chroma and the wash hue with @property means the colour itself glides, not just the properties that use it.
perspective-[1400px], transform-3d, backface-hidden, rotate-y-180 — so the entire flip is a hidden checkbox and group-has-checked/f:. No JavaScript, and focus can never land on the face you can't see.
[&::-webkit-slider-thumb]:), and the script marks the winner with a data-best attribute that data-best: utilities restyle.
translate-x-full, translate-x-[200%] — so it's correct at any tab width with no breakpoint maths, and the tab bar is an honest radio group that arrow keys drive natively.
[animation-timeline:view()] and [animation-range:entry_0%_entry_60%] — and each bar's fill is a single [--tpt13-fill:.42].
has-checked:; summary lines fold with grid-rows-[0fr] → data-on:grid-rows-[1fr]; and a savings nudge tells the buyer exactly how close the discount is.
backdrop-blur-[22px] backdrop-saturate-150 does the frosting, the moving blobs prove the glass is real, and two arbitrary variants handle the edge cases: supports-[backdrop-filter:blur(1px)]: for the enhancement and [@media(prefers-reduced-transparency:reduce)]: for readers who need solid cards.
[background:…] utility using the padding-box / border-box trick; its visible arc length is a registered @property percentage, transitioned by hover:[--tpt16-p:100%].
clip-path and pseudo-element utilities, no images. The fold-back triangles are before:/after: squares clipped by [clip-path:polygon(…)], tinted with a darker rib-fold token.
inset-shadow-* utility makes the press honest — has-checked:shadow-none has-checked:inset-shadow-[…] — and because neumorphism is weak on contrast, a real accent ring and a “Selected” label carry the state.
snap-x snap-mandatory does the physics, an IntersectionObserver only sets data-active and aria-current, and from min-[900px]: the rail relaxes into a normal three-up grid.
@container on the wrapper, @max-[40rem]: on every element that changes — so it adapts in a sidebar, a modal or a phone alike.
after:animate-tpt21-sheen sweep on translate; the swap is group-data-ready/g:; and while loading the grid is inert, so no one can click a CTA that isn't there yet.
15 mouse-aware 3D tilt hover cards — e-commerce product spotlight, glassmorphism parallax team card, interactive pricing tier, holographic NFT collectible, pop-out mascot, dark tech grid with border glow, media player album art, blog article preview, cyberpunk neon glow, dashboard KPI widget, minimalist real estate, flip-to-back tilt, mobile app showcase, course learning card, and a Pure CSS touch-friendly tilt. Vanilla JS writes --rx/--ry/--mx/--my; all rendering stays in CSS on the GPU.
24 hand-coded CSS animated card patterns organised by what triggers the motion, not by card style. Scroll and entrance triggers: staggered grid reveals, @starting-style mount-in, scroll-driven scale and fade on animation-timeline: view(), View Transitions API card-to-detail morphs, blur-to-sharp lazy image loading, and FLIP re-layout when a filter changes. State-change triggers: add-to-cart success morph, like and save particle burst, expand and collapse to intrinsic height with calc-size(), swipe-to-dismiss on Pointer Events, and skeleton-to-loaded crossfade. Data-driven triggers: count-up KPI metrics, SVG sparkline draw-on-enter, and progress ring fill on load. Ambient idle loops: breathing glow, floating drift, animated gradient mesh backgrounds, conic rotating borders, auto-cycling testimonial decks, and live status pulses. Plus four hover patterns where the effect is the topic itself: cursor spotlight, holographic foil glare, corner ribbon slide, and horizontal accordion expand. Every card is scoped under a .ac-NN prefix for no-collision pasting, guards prefers-reduced-motion, animates compositor-only properties, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
22 hand-coded CSS avatars for chat apps, team dashboards, comment threads, account menus, and social profiles. Covers circular and squircle shapes, gradient and conic story rings, hexagon clip-path crops, online status dots, notification count badges, verified checkmarks, stacked facepiles with plus-N overflow, initials fallbacks for users without photos, broken-image recovery, avatar pickers, and a size scale system where the ring, badge, and status dot all scale from a single custom property.