The prompt

Build a prepaid credit purchase block with Tailwind CSS. A centered heading, then three selectable pack cards built as labels wrapping hidden radio inputs — Starter 1,000, Growth 5,000, Scale 25,000 — each showing the credit count in large type, its one-time price, and a small saving pill on the discounted packs; use peer-checked variants so the chosen card gets a dark border and a ring. Underneath, a grey summary panel with a quantity stepper (minus, count, plus) on the right of its heading row, a line-item list for credits, effective rate and volume discount, a bold "Total today" row, a full-width dark buy button, and a footnote that credits never expire. Carry the credit count and price on each radio as data attributes. Then add JavaScript that reprices everything whenever the pack or quantity changes: multiply the pack by the quantity, format the credit count with thousands separators, show the effective per-credit rate to three decimals, compare it against the $0.02 list rate to show the saving (hiding that row when there is none), clamp the stepper between 1 and 20, and write the total into the summary.

Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? Open the Tailwind source.