12 pieces in four styles. Preview each one live, then copy the prompt that puts it in your project.
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.
Plans side by side in an ink-outlined card: plan names in the title voice, big type-figure prices and sm CTAs in the header (the featured column's head is the cobalt cell and its body cells cobalt-100), group rows on paper-2 in mono caps, volt ticks and ink-3 dashes with screen-reader text.
A services or menu list on rules: names in the display face at lead size, a note under each, a dotted leader, and big type-figure prices aligned at the end; one or two columns.
Plan cards with a Monthly/Yearly switch in CSS only (native radios and :has()), so it works before and without JavaScript.
Plans side by side in a hairline panel: header prices in mono and calls to action, mono group rows, aurora ticks and grey dashes with screen-reader text; the featured column is lifted with an aurora line on its top edge.
A services or menu list on hairlines: name and a mono price on a quiet dotted leader, a note and a description under each, in one or two columns.
Plan cards with a Monthly/Yearly switch in CSS only (native radios and :has()), so it works before and without JavaScript.
Plans side by side: header prices and calls to action, grouped feature rows, ticks and dashes with screen-reader text.
A services or menu list on a white clay panel: name and price on a dotted leader, a note and a description under each, in one or two columns.
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.
Plans side by side: header prices and calls to action, grouped feature rows, ticks and dashes with screen-reader text.
A services or menu list: name and price on a dotted leader, a note and a description under each, in one or two columns.
A free account takes 3 new pieces a day: the code, the styles and the install prompt. Pro and Team remove the limit.