pricingIntermediatehover

Brutalist Pricing

White, thick black borders, primary-color plans with hard offset shadows.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a brutalist 3-tier pricing section with Tailwind: super-saturated cream page background, an Inter Black 900-weight uppercase headline with a black-block-highlighted line ('SHIP TODAY.'). Three plan cards in a row, each with a thick 3px black border, sharp corners, and a 6px hard offset black box-shadow. On hover, translate the card by (-3px,-3px) and grow the shadow to 9px so it 'lifts'. Each card has a different solid bright background (yellow-300, near-black, green-300). The dark middle plan uses a coral pink shadow instead of black. Inside: a top row with the plan name + a bordered mono chip, a thick currentColor border-bottom, a giant Inter Black price + mono '/MONTH', a feature list with circle bullets, and a thick-bordered uppercase CTA that inverts on hover.

Code

html

<!--
  Source: Vibedex
  https://vibedex.io
  License: MIT
  Surfaced via https://vibedex.io/components/vbx-brutalist-pricing
-->
<section class="section"><h2>PICK A PLAN.<br><span class="u">SHIP TODAY.</span></h2><div class="plans"><article class="plan p1"><div class="top"><h3>STARTER</h3><span class="chip">FREE</span></div><div class="price"><span class="big">$0</span><span class="per">/MONTH</span></div><ul><li>● 50 components</li><li>● Open source</li><li>● Community support</li></ul><a class="cta" href="#">START FOR FREE →</a></article><article class="plan p2"><div class="top"><h3>STUDIO</h3><span class="chip">POPULAR</span></div><div class="price"><span class="big">$29</span><span class="per">/MONTH</span></div><ul><li>● 200+ components</li><li>● Premium blocks</li><li>● Priority support</li><li>● Custom themes</li></ul><a class="cta" href="#">CHOOSE STUDIO →</a></article><article class="plan p3"><div class="top"><h3>TEAM</h3><span class="chip">SCALE</span></div><div class="price"><span class="big">$99</span><span class="per">/MONTH</span></div><ul><li>● Everything in Studio</li><li>● SSO + audit logs</li><li>● Dedicated CSM</li></ul><a class="cta" href="#">TALK TO US →</a></article></div></section>