Soft BentoMotion
Plan cards with a Monthly/Yearly switch in CSS only (native radios and :has()), so it works before and without JavaScript.
Plan cards with a Monthly/Yearly switch in CSS only (native radios and :has()), so it works before and without JavaScript. Both prices are in the HTML; the hidden one is display: none and the shown one rolls in. The featured plan is the view's blue block: taller, with the pop badge and one BorderBeam lap; the others lift on hover. 1–4 plans keep equal heights.
It is part of Soft Bento. The style’s 92 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.
To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.
Plans as one ruled sheet with the featured plan on the cobalt cell (data-surface="accent": white text, its accent CTA turns volt), and an ink-thumb Monthly/Yearly switch in CSS only (native radios and :has()), so it works before and without JavaScript.
Plan cards with a Monthly/Yearly switch in CSS only (native radios and :has()), so it works before and without JavaScript.
Plan cards with a Monthly/Yearly switch in CSS only (native radios and :has(), the segmented look with the save text as a lime badge), so it works before and without JavaScript.