Three-Tier Pricing Table

HTML · CSS

codeinfoweb.com/design-prompts/pricing-table

The prompt

Build a three-tier pricing section for a product called Atlas, using only HTML and CSS.

Typography:
- Fraunces from Google Fonts for the headline, plan names and prices, weight 600
- Instrument Sans for body copy, labels and buttons
- Headline at clamp(34px, 5.2vw, 52px), prices at 60px with -0.045em letter-spacing

Palette:
- Warm paper ground #FBF9F4 with a soft radial wash at the top, cards in pure white
- Deep forest accent #1F4D3D for the featured plan, its button, badge and the feature ticks
- Hairline borders #E6E1D6, never grey drop shadows on a warm ground

Layout:
- Centred header: a pill eyebrow, a two-line serif headline, one supporting paragraph
- A segmented monthly/yearly toggle built from two radio inputs, with a sliding pill behind the active label and a "2 months free" chip on Yearly
- Three cards: Starter free, Pro $24, Scale $79. Yearly prices are $0, $19 and $63
- Each card: plan name, one-line pitch, price with a raised dollar sign and a /month suffix, a billing note, a call to action, then a divider and a feature checklist
- The middle card is the anchor: accent border, a "Most popular" badge straddling its top edge, a solid accent button and a green-tinted shadow. Keep its internal padding identical to the others so all three prices sit on the same line

Interaction, no JavaScript:
- The radios live as siblings of both the toggle and the plan grid, so :checked plus the general sibling combinator can drive everything
- Checking Yearly swaps every price and billing note, slides the toggle pill and inverts the "2 months free" chip
- Cards lift 4px on hover with a tight shadow, and enter with a staggered fade-and-rise
- Feature ticks are drawn with a circle from ::before and a rotated two-sided border from ::after, no icon font

Rules:
- One HTML file, one CSS file, no JavaScript
- CSS custom properties for colours, radii and spacing
- Under 940px collapse to one column capped at 460px, with the featured card moved first using order
- Real label and input elements, a focus-visible ring driven from the hidden radio, semantic headings
- A prefers-reduced-motion block that disables all animation and transition

Return the complete code, ready to open in a browser.

Edit anything above before copying. Change the first line to rename the build, or the style word to shift the look.

About the three-tier pricing table prompt

A pricing section with three plans, a highlighted middle tier, feature checklists and a monthly to yearly toggle built with pure CSS.

What you get

A centred header with a pill eyebrow, a two-line serif headline and a supporting paragraph
A monthly and yearly segmented toggle with a pill that slides behind the active label
Three plan cards: Starter free, Pro $24 and Scale $79, dropping to $0, $19 and $63 on yearly
A raised middle card with an accent border, a badge straddling its top edge and a green-tinted shadow
Feature checklists with ticks drawn entirely in CSS, no icon font
A billing note under each price that changes with the toggle

Techniques it uses

Worth knowing whether you run the prompt or write the code yourself.

:checked with a sibling combinator

The two radios sit as siblings of both the toggle and the plan grid, so #yearly:checked ~ .plans .m { display:none } can reach every price at once. That sibling relationship is the whole trick.

A sliding segmented control

One absolutely positioned span sits behind the labels. Each :checked state sets its width and translateX, and a 340ms cubic-bezier transition does the rest.

CSS-drawn tick marks

::before draws a tinted circle and ::after draws a two-sided border rotated 43 degrees. No icon font, no SVG, no image request.

Equal card heights without a hack

align-items: start on the grid plus identical padding on all three cards keeps every price on the same baseline, even though the middle card is visually raised.

How to adapt it

Add a fourth tier

Ask for four columns instead of three and change .plans to repeat(4, minmax(0,1fr)). The stacking rule under 940px needs no edit because it already collapses to a single column.

Change the discount

The yearly prices are plain text in the markup, not calculated. Edit the b.y values and the matching billing notes, then update the chip text on the toggle label.

Move the highlight

The .best class carries the accent border, badge and shadow. Move it to another card and the layout follows, since no padding differs between the three.

Use a different display face

Fraunces is doing the work on the headline and prices. Any high-contrast serif with a wide weight range will drop in; keep the -0.045em letter-spacing on the price.

Frequently asked questions

How does the monthly to yearly toggle work without JavaScript?

Two radio inputs sit as siblings of the plan grid. The :checked selector plus a sibling combinator swaps which price is visible, so no script is needed.

Can I add a fourth plan?

Yes. Ask the model for four columns instead of three, or add the card yourself and change the grid to four tracks.

Are the feature ticks images?

No. They are drawn in CSS with a rotated border, so there are no icon fonts and no image requests.

Which AI tools does this prompt work with?

Any model that writes code. It is written for Claude, Cursor, Codex and v0, but ChatGPT and Gemini handle it the same way.

Does the toggle work without JavaScript?

Yes, entirely. It is two radio inputs and the :checked pseudo-class. That also means it survives a page load with JS disabled or still parsing.

Can I calculate the yearly price automatically?

Not in pure CSS. The yearly figures are written into the markup. If you want them derived, that is where you would add a few lines of JavaScript or generate them server-side.