21 Tailwind CSS Pricing Sections
09 / 21

All 21 in 21 Tailwind CSS Pricing Sections

  1. 01Tailwind Classic Three Tier Pricing Section
  2. 02Tailwind Highlighted Popular Pricing Tier
  3. 03Tailwind Feature Comparison Pricing Table
  4. 04Tailwind Monthly Yearly Billing Toggle Pricing
  5. 05Tailwind Usage Slider Pricing Estimator
  6. 06Tailwind Single Premium Pricing Card
  7. 07Tailwind Bento Pricing Grid
  8. 08Tailwind Vertical Tier Timeline Pricing
  9. 09Tailwind Brutalist Print Pricing Zine
  10. 10Tailwind Glass Aurora Pricing Cards
  11. 11Tailwind Per-Seat Pricing Calculator
  12. 12Tailwind Animated Conic Border Pricing Cards
  13. 13Tailwind Editorial Two Column Pricing List
  14. 14Tailwind 3D Tilt Perspective Pricing Cards
  15. 15Tailwind Synthwave Neon Pricing Section
  16. 16Tailwind Pay What You Want Pricing Card
  17. 17Tailwind Currency Switcher Pricing Section
  18. 18Tailwind Social Proof Marquee Pricing
  19. 19Tailwind Feature Accordion Pricing Tiers
  20. 20Tailwind Cursor Spotlight Pricing Cards
  21. 21Tailwind Annual Savings Stripe Pricing
Pure TailwindMIT licensed

Tailwind Brutalist Print Pricing Zine

Black on cream, mono type, hard 8px shadows and three cards sitting askew on graph paper. The port lands on a genuinely better mechanism than the CSS: because Tailwind compiles rotate-* and translate-* to the individual rotate and translate properties, the hover nudge no longer wipes out each card's tilt — which in the CSS version needs the rotation repeated inside every hover rule.

Live Demo
Plain CSSTailwind v4
Try it

Complete Tailwind CSS landing page templates in HTML, React, Next.js and Vue · from $49

Cruip · Affiliate link

Browse Cruip templates

The code

<section class="tps-09 w-full min-h-svh bg-tps09-paper bg-[repeating-linear-gradient(0deg,transparent_0,transparent_23px,var(--color-tps09-rule)_23px,var(--color-tps09-rule)_24px),repeating-linear-gradient(90deg,transparent_0,transparent_23px,var(--color-tps09-rule)_23px,var(--color-tps09-rule)_24px)] font-tps09-mono text-tps09-ink px-[clamp(20px,4vw,40px)] py-[clamp(28px,5vw,56px)]" aria-label="Pricing">
  <header class="mb-[clamp(24px,4vw,36px)]">
    <span class="inline-block mb-3 px-2.5 py-1 bg-tps09-ink text-tps09-paper text-[11px] tracking-[0.18em] uppercase">issue &#8470;07 &middot; pricing</span>
    <h2 class="m-0 text-[clamp(28px,5vw,44px)] font-extrabold uppercase leading-[1.1] tracking-[-0.02em]">Three sizes. One product. Pick.</h2>
  </header>
  <div class="grid grid-cols-1 md:grid-cols-[repeat(3,minmax(0,1fr))] gap-8 md:gap-6 max-w-[380px] md:max-w-[980px] mx-auto">
    <article class="relative p-5 pt-5.5 bg-tps09-paper border-2 border-tps09-ink shadow-[8px_8px_0_0_--theme(--color-tps09-ink)] transition-[translate,box-shadow] duration-150 ease-linear md:rotate-[-1.2deg] hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[6px_6px_0_0_--theme(--color-tps09-ink)] motion-reduce:transition-none motion-reduce:hover:translate-x-0 motion-reduce:hover:translate-y-0 motion-reduce:hover:shadow-[8px_8px_0_0_--theme(--color-tps09-ink)]">
      <div class="flex justify-between items-baseline py-1 text-xs border-b border-dotted border-tps09-dot"><span class="uppercase tracking-[0.06em] opacity-70">Plan</span><strong class="text-sm font-bold">Solo</strong></div>
      <div class="flex justify-between items-baseline py-1 text-xs border-b border-dotted border-tps09-dot"><span class="uppercase tracking-[0.06em] opacity-70">Cost</span><strong class="text-[22px] font-extrabold">$8/mo</strong></div>
      <div class="flex justify-between items-baseline py-1 text-xs border-b border-dotted border-tps09-dot"><span class="uppercase tracking-[0.06em] opacity-70">Built for</span><strong class="text-sm font-bold">Indie devs</strong></div>
      <hr class="border-0 border-t-2 border-tps09-ink mt-3.5 mb-3">
      <ul class="list-none p-0 m-0 mb-4.5 text-[12.5px]/[1.7]">
        <li><span aria-hidden="true">&#9656; </span>1 site, 1 admin</li>
        <li><span aria-hidden="true">&#9656; </span>5 GB storage</li>
        <li><span aria-hidden="true">&#9656; </span>Forum support</li>
      </ul>
      <a href="#solo" class="block text-center px-4 py-2.75 bg-tps09-paper text-tps09-ink border-2 border-tps09-ink text-[13px] font-bold uppercase tracking-[0.06em] no-underline transition-[background-color,color] duration-150 ease-linear hover:bg-tps09-ink hover:text-tps09-acc focus-visible:outline-[3px] focus-visible:outline-tps09-focus focus-visible:outline-offset-2 motion-reduce:transition-none">[ Buy Solo ]</a>
    </article>
    <article class="relative p-5 pt-5.5 bg-tps09-acc border-2 border-tps09-ink shadow-[8px_8px_0_0_--theme(--color-tps09-ink)] transition-[translate,box-shadow] duration-150 ease-linear md:rotate-[0.8deg] hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[6px_6px_0_0_--theme(--color-tps09-ink)] motion-reduce:transition-none motion-reduce:hover:translate-x-0 motion-reduce:hover:translate-y-0 motion-reduce:hover:shadow-[8px_8px_0_0_--theme(--color-tps09-ink)]">
      <span class="absolute -top-3.5 -right-2.5 px-3 py-1.25 bg-tps09-ink text-tps09-acc text-[11px] font-bold uppercase tracking-[0.12em] rotate-[4deg]">&#9733; POPULAR</span>
      <div class="flex justify-between items-baseline py-1 text-xs border-b border-dotted border-tps09-dot"><span class="uppercase tracking-[0.06em] opacity-70">Plan</span><strong class="text-sm font-bold">Studio</strong></div>
      <div class="flex justify-between items-baseline py-1 text-xs border-b border-dotted border-tps09-dot"><span class="uppercase tracking-[0.06em] opacity-70">Cost</span><strong class="text-[22px] font-extrabold">$24/mo</strong></div>
      <div class="flex justify-between items-baseline py-1 text-xs border-b border-dotted border-tps09-dot"><span class="uppercase tracking-[0.06em] opacity-70">Built for</span><strong class="text-sm font-bold">Small studios</strong></div>
      <hr class="border-0 border-t-2 border-tps09-ink mt-3.5 mb-3">
      <ul class="list-none p-0 m-0 mb-4.5 text-[12.5px]/[1.7]">
        <li><span aria-hidden="true">&#9656; </span>10 sites, 5 admins</li>
        <li><span aria-hidden="true">&#9656; </span>50 GB storage</li>
        <li><span aria-hidden="true">&#9656; </span>Email support</li>
        <li><span aria-hidden="true">&#9656; </span>Custom domain</li>
      </ul>
      <a href="#studio" class="block text-center px-4 py-2.75 bg-tps09-ink text-tps09-acc border-2 border-tps09-ink text-[13px] font-bold uppercase tracking-[0.06em] no-underline transition-[background-color,color] duration-150 ease-linear hover:bg-tps09-acc hover:text-tps09-ink focus-visible:outline-[3px] focus-visible:outline-tps09-focus focus-visible:outline-offset-2 motion-reduce:transition-none">[ Buy Studio ]</a>
    </article>
    <article class="relative p-5 pt-5.5 bg-tps09-paper border-2 border-tps09-ink shadow-[8px_8px_0_0_--theme(--color-tps09-ink)] transition-[translate,box-shadow] duration-150 ease-linear md:rotate-[-0.6deg] hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[6px_6px_0_0_--theme(--color-tps09-ink)] motion-reduce:transition-none motion-reduce:hover:translate-x-0 motion-reduce:hover:translate-y-0 motion-reduce:hover:shadow-[8px_8px_0_0_--theme(--color-tps09-ink)]">
      <div class="flex justify-between items-baseline py-1 text-xs border-b border-dotted border-tps09-dot"><span class="uppercase tracking-[0.06em] opacity-70">Plan</span><strong class="text-sm font-bold">Shop</strong></div>
      <div class="flex justify-between items-baseline py-1 text-xs border-b border-dotted border-tps09-dot"><span class="uppercase tracking-[0.06em] opacity-70">Cost</span><strong class="text-[22px] font-extrabold">$60/mo</strong></div>
      <div class="flex justify-between items-baseline py-1 text-xs border-b border-dotted border-tps09-dot"><span class="uppercase tracking-[0.06em] opacity-70">Built for</span><strong class="text-sm font-bold">Agencies</strong></div>
      <hr class="border-0 border-t-2 border-tps09-ink mt-3.5 mb-3">
      <ul class="list-none p-0 m-0 mb-4.5 text-[12.5px]/[1.7]">
        <li><span aria-hidden="true">&#9656; </span>Unlimited sites</li>
        <li><span aria-hidden="true">&#9656; </span>500 GB storage</li>
        <li><span aria-hidden="true">&#9656; </span>Priority support</li>
        <li><span aria-hidden="true">&#9656; </span>White-label</li>
      </ul>
      <a href="#shop" class="block text-center px-4 py-2.75 bg-tps09-paper text-tps09-ink border-2 border-tps09-ink text-[13px] font-bold uppercase tracking-[0.06em] no-underline transition-[background-color,color] duration-150 ease-linear hover:bg-tps09-ink hover:text-tps09-acc focus-visible:outline-[3px] focus-visible:outline-tps09-focus focus-visible:outline-offset-2 motion-reduce:transition-none">[ Buy Shop ]</a>
    </article>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tps09-paper: #f4eccc;
  --color-tps09-paper: oklch(0.93 0.04 90);
  --color-tps09-ink: #0e0e0e;
  --color-tps09-ink: oklch(0.15 0 0);
  --color-tps09-acc: #facc15;
  --color-tps09-acc: oklch(0.86 0.17 92);
  --color-tps09-focus: #ff5e5e;
  --color-tps09-focus: oklch(0.7 0.2 25);
  --color-tps09-dot: #0e0e0e40;
  --color-tps09-dot: oklch(0.15 0 0 / 0.25);
  --color-tps09-rule: #0e0e0e0a;
  --color-tps09-rule: oklch(0.15 0 0 / 0.04);
  --font-tps09-mono: 'JetBrains Mono', 'Courier New', monospace;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the section is correctly sized in the moment before the
   browser build has compiled its utilities. */

.tps-09 {
  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";

@theme {
  --color-tps09-paper: #f4eccc;
  --color-tps09-paper: oklch(0.93 0.04 90);
  --color-tps09-ink: #0e0e0e;
  --color-tps09-ink: oklch(0.15 0 0);
  --color-tps09-acc: #facc15;
  --color-tps09-acc: oklch(0.86 0.17 92);
  --color-tps09-focus: #ff5e5e;
  --color-tps09-focus: oklch(0.7 0.2 25);
  --color-tps09-dot: #0e0e0e40;
  --color-tps09-dot: oklch(0.15 0 0 / 0.25);
  --color-tps09-rule: #0e0e0e0a;
  --color-tps09-rule: oklch(0.15 0 0 / 0.04);
  --font-tps09-mono: 'JetBrains Mono', 'Courier New', monospace;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the section is correctly sized in the moment before the
   browser build has compiled its utilities. */

.tps-09 {
  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=JetBrains+Mono:wght@400;500;700;800&display=swap">

What changed in the port

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

  • The port's best moment: rotate-* and translate-* compile to the individual rotate and translate properties, so the hover press composes with the tilt instead of replacing it. The CSS version has to repeat each rotation inside its hover rule — a bug waiting to happen.
  • Three .ps-09__rN rules become three md:rotate-[…] utilities on the cards; the 820px straightening media query disappears, because the tilt is a md: enhancement to begin with.
  • The 8px→6px shadow pair now sits one utility apart from the 2px translate it answers, which is the whole reason this style is fiddly to maintain in CSS.
  • The graph paper is two repeating-linear-gradient layers in one arbitrary background value, referencing an alpha token — no texture image, no extra element.
  • .ps-09__pri { font-size: 22px !important } is gone: the price simply gets text-[22px] instead of the row's text-sm, with no rule to override.
  • duration-150 ease-linear on each element states the aesthetic (cuts, not curves) in the markup rather than in a shared transition declaration.
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 Brutalist Print Pricing Zine
Source: https://codefronts.com/layouts/tailwind-css-pricing-sections/tailwind-brutalist-print-pricing-zine/

Black on cream, mono type, hard 8px shadows and three cards sitting askew on graph paper. The port lands on a genuinely better mechanism than the CSS: because Tailwind compiles rotate-* and translate-* to the individual rotate and translate properties, the hover nudge no longer wipes out each card's tilt &mdash; which in the CSS version needs the rotation repeated inside every hover rule.
## HTML
```html
<section class="tps-09 w-full min-h-svh bg-tps09-paper bg-[repeating-linear-gradient(0deg,transparent_0,transparent_23px,var(--color-tps09-rule)_23px,var(--color-tps09-rule)_24px),repeating-linear-gradient(90deg,transparent_0,transparent_23px,var(--color-tps09-rule)_23px,var(--color-tps09-rule)_24px)] font-tps09-mono text-tps09-ink px-[clamp(20px,4vw,40px)] py-[clamp(28px,5vw,56px)]" aria-label="Pricing">
  <header class="mb-[clamp(24px,4vw,36px)]">
    <span class="inline-block mb-3 px-2.5 py-1 bg-tps09-ink text-tps09-paper text-[11px] tracking-[0.18em] uppercase">issue &#8470;07 &middot; pricing</span>
    <h2 class="m-0 text-[clamp(28px,5vw,44px)] font-extrabold uppercase leading-[1.1] tracking-[-0.02em]">Three sizes. One product. Pick.</h2>
  </header>
  <div class="grid grid-cols-1 md:grid-cols-[repeat(3,minmax(0,1fr))] gap-8 md:gap-6 max-w-[380px] md:max-w-[980px] mx-auto">
    <article class="relative p-5 pt-5.5 bg-tps09-paper border-2 border-tps09-ink shadow-[8px_8px_0_0_--theme(--color-tps09-ink)] transition-[translate,box-shadow] duration-150 ease-linear md:rotate-[-1.2deg] hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[6px_6px_0_0_--theme(--color-tps09-ink)] motion-reduce:transition-none motion-reduce:hover:translate-x-0 motion-reduce:hover:translate-y-0 motion-reduce:hover:shadow-[8px_8px_0_0_--theme(--color-tps09-ink)]">
      <div class="flex justify-between items-baseline py-1 text-xs border-b border-dotted border-tps09-dot"><span class="uppercase tracking-[0.06em] opacity-70">Plan</span><strong class="text-sm font-bold">Solo</strong></div>
      <div class="flex justify-between items-baseline py-1 text-xs border-b border-dotted border-tps09-dot"><span class="uppercase tracking-[0.06em] opacity-70">Cost</span><strong class="text-[22px] font-extrabold">$8/mo</strong></div>
      <div class="flex justify-between items-baseline py-1 text-xs border-b border-dotted border-tps09-dot"><span class="uppercase tracking-[0.06em] opacity-70">Built for</span><strong class="text-sm font-bold">Indie devs</strong></div>
      <hr class="border-0 border-t-2 border-tps09-ink mt-3.5 mb-3">
      <ul class="list-none p-0 m-0 mb-4.5 text-[12.5px]/[1.7]">
        <li><span aria-hidden="true">&#9656; </span>1 site, 1 admin</li>
        <li><span aria-hidden="true">&#9656; </span>5 GB storage</li>
        <li><span aria-hidden="true">&#9656; </span>Forum support</li>
      </ul>
      <a href="#solo" class="block text-center px-4 py-2.75 bg-tps09-paper text-tps09-ink border-2 border-tps09-ink text-[13px] font-bold uppercase tracking-[0.06em] no-underline transition-[background-color,color] duration-150 ease-linear hover:bg-tps09-ink hover:text-tps09-acc focus-visible:outline-[3px] focus-visible:outline-tps09-focus focus-visible:outline-offset-2 motion-reduce:transition-none">[ Buy Solo ]</a>
    </article>
    <article class="relative p-5 pt-5.5 bg-tps09-acc border-2 border-tps09-ink shadow-[8px_8px_0_0_--theme(--color-tps09-ink)] transition-[translate,box-shadow] duration-150 ease-linear md:rotate-[0.8deg] hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[6px_6px_0_0_--theme(--color-tps09-ink)] motion-reduce:transition-none motion-reduce:hover:translate-x-0 motion-reduce:hover:translate-y-0 motion-reduce:hover:shadow-[8px_8px_0_0_--theme(--color-tps09-ink)]">
      <span class="absolute -top-3.5 -right-2.5 px-3 py-1.25 bg-tps09-ink text-tps09-acc text-[11px] font-bold uppercase tracking-[0.12em] rotate-[4deg]">&#9733; POPULAR</span>
      <div class="flex justify-between items-baseline py-1 text-xs border-b border-dotted border-tps09-dot"><span class="uppercase tracking-[0.06em] opacity-70">Plan</span><strong class="text-sm font-bold">Studio</strong></div>
      <div class="flex justify-between items-baseline py-1 text-xs border-b border-dotted border-tps09-dot"><span class="uppercase tracking-[0.06em] opacity-70">Cost</span><strong class="text-[22px] font-extrabold">$24/mo</strong></div>
      <div class="flex justify-between items-baseline py-1 text-xs border-b border-dotted border-tps09-dot"><span class="uppercase tracking-[0.06em] opacity-70">Built for</span><strong class="text-sm font-bold">Small studios</strong></div>
      <hr class="border-0 border-t-2 border-tps09-ink mt-3.5 mb-3">
      <ul class="list-none p-0 m-0 mb-4.5 text-[12.5px]/[1.7]">
        <li><span aria-hidden="true">&#9656; </span>10 sites, 5 admins</li>
        <li><span aria-hidden="true">&#9656; </span>50 GB storage</li>
        <li><span aria-hidden="true">&#9656; </span>Email support</li>
        <li><span aria-hidden="true">&#9656; </span>Custom domain</li>
      </ul>
      <a href="#studio" class="block text-center px-4 py-2.75 bg-tps09-ink text-tps09-acc border-2 border-tps09-ink text-[13px] font-bold uppercase tracking-[0.06em] no-underline transition-[background-color,color] duration-150 ease-linear hover:bg-tps09-acc hover:text-tps09-ink focus-visible:outline-[3px] focus-visible:outline-tps09-focus focus-visible:outline-offset-2 motion-reduce:transition-none">[ Buy Studio ]</a>
    </article>
    <article class="relative p-5 pt-5.5 bg-tps09-paper border-2 border-tps09-ink shadow-[8px_8px_0_0_--theme(--color-tps09-ink)] transition-[translate,box-shadow] duration-150 ease-linear md:rotate-[-0.6deg] hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[6px_6px_0_0_--theme(--color-tps09-ink)] motion-reduce:transition-none motion-reduce:hover:translate-x-0 motion-reduce:hover:translate-y-0 motion-reduce:hover:shadow-[8px_8px_0_0_--theme(--color-tps09-ink)]">
      <div class="flex justify-between items-baseline py-1 text-xs border-b border-dotted border-tps09-dot"><span class="uppercase tracking-[0.06em] opacity-70">Plan</span><strong class="text-sm font-bold">Shop</strong></div>
      <div class="flex justify-between items-baseline py-1 text-xs border-b border-dotted border-tps09-dot"><span class="uppercase tracking-[0.06em] opacity-70">Cost</span><strong class="text-[22px] font-extrabold">$60/mo</strong></div>
      <div class="flex justify-between items-baseline py-1 text-xs border-b border-dotted border-tps09-dot"><span class="uppercase tracking-[0.06em] opacity-70">Built for</span><strong class="text-sm font-bold">Agencies</strong></div>
      <hr class="border-0 border-t-2 border-tps09-ink mt-3.5 mb-3">
      <ul class="list-none p-0 m-0 mb-4.5 text-[12.5px]/[1.7]">
        <li><span aria-hidden="true">&#9656; </span>Unlimited sites</li>
        <li><span aria-hidden="true">&#9656; </span>500 GB storage</li>
        <li><span aria-hidden="true">&#9656; </span>Priority support</li>
        <li><span aria-hidden="true">&#9656; </span>White-label</li>
      </ul>
      <a href="#shop" class="block text-center px-4 py-2.75 bg-tps09-paper text-tps09-ink border-2 border-tps09-ink text-[13px] font-bold uppercase tracking-[0.06em] no-underline transition-[background-color,color] duration-150 ease-linear hover:bg-tps09-ink hover:text-tps09-acc focus-visible:outline-[3px] focus-visible:outline-tps09-focus focus-visible:outline-offset-2 motion-reduce:transition-none">[ Buy Shop ]</a>
    </article>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tps09-paper: #f4eccc;
  --color-tps09-paper: oklch(0.93 0.04 90);
  --color-tps09-ink: #0e0e0e;
  --color-tps09-ink: oklch(0.15 0 0);
  --color-tps09-acc: #facc15;
  --color-tps09-acc: oklch(0.86 0.17 92);
  --color-tps09-focus: #ff5e5e;
  --color-tps09-focus: oklch(0.7 0.2 25);
  --color-tps09-dot: #0e0e0e40;
  --color-tps09-dot: oklch(0.15 0 0 / 0.25);
  --color-tps09-rule: #0e0e0e0a;
  --color-tps09-rule: oklch(0.15 0 0 / 0.04);
  --font-tps09-mono: 'JetBrains Mono', 'Courier New', monospace;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's
   w-full min-h-svh, so the section is correctly sized in the moment before the
   browser build has compiled its utilities. */

.tps-09 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Separate transform properties fix the classic brutalist bug. In the CSS version, .ps-09__card:hover { transform: translate(2px,2px) } replaces the whole transform, so each tilt rule has to be restated in hover or the card snaps straight. Tailwind v4 emits:

rotate: -1.2deg;          /* from md:rotate-[-1.2deg] */
translate: 2px 2px;        /* from hover:translate-x-0.5 hover:translate-y-0.5 */

Two properties, composed by the engine. The tilt is stated once, the nudge is stated once, and no one has to remember to keep them in sync.

The paper is a background, not a texture file. Two repeating-linear-gradients at 24px intervals plus the cream base, all in one arbitrary value. It costs nothing to download and it scales with zoom.

Rotations could be an index instead. Three static utilities are clearer at this count; with nine cards the pattern is style="--i:2" and md:[rotate:calc((var(--i)-1)*0.7deg)] — one class list for any number of cards, which is the collection's standard answer to :nth-child.

Brutalism has to stay accessible. The focus ring is a 3px red outline — deliberately loud, because a subtle ring on a 2px black border is invisible. Ink on cream measures well past 4.5:1, and the yellow POPULAR card keeps black text for the same reason.

Make it yours

  • Tilt amounts: the three md:rotate-[…] values. Past about 2deg the cards start to collide at the gap, so widen gap-6 if you go bigger.
  • Shadow depth: 8px resting / 6px hover. Keep the difference equal to the hover translate or the card appears to slide rather than press.
  • Grid pitch: the two 23px/24px stops in the background value. 32px reads as drafting paper, 12px as an engineering pad.
  • Palette: --color-tps09-ink, --color-tps09-paper and --color-tps09-acc are the whole system — three tokens, no gradients anywhere.
  • Swap the [ Buy Solo ] bracket convention for → arrows if the zine voice is too much; the layout does not depend on it.

Gotchas — read before shipping

  • Do not combine the tilt into an arbitrary [transform:…] utility — that reintroduces the exact bug the port fixed, because a composed transform and the individual properties do not merge.
  • Keep the tilt behind md:. Rotated cards in a single column read as broken, not styled.
  • motion-reduce: resets the press (motion-reduce:hover:translate-x-0 and the resting shadow), not the tilt: a static rotation is not motion and removing it would change the design for no accessibility gain.
  • The stamp is rotated 4deg and sits outside the card's corner — it needs relative on the card, and it must not be clipped by overflow-hidden.
  • A 3px focus outline is not decoration here. A default 2px ring disappears against the 2px black border, and its removal would be a WCAG 2.4.7 failure.
  • The yellow card must keep dark ink. White text on #facc15 measures about 1.7:1.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Individual transform properties (rotate, translate, scale) are Baseline 2022 — Chrome 104, Safari 14.1, Firefox 72 — and they are what make the tilt and the hover nudge compose. Everything else here is decades old.

Techniques used in this demo

Utilitiesfirst-class utility or variant

box-shadowtw ↗transitionstw ↗prefers-reduced-motiontw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗

Arbitraryneeds bracket syntax

repeating linear gradienttw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →