Bold Base Plan Selector
A dark section with a large headline, three base plan cards in a row, and a sticky summary panel that updates as you select a plan and toggle add-ons.
π Layout Archetype
sticky-sidebar β Engineered with responsive CSS flexbox and CSS grids that collapse gracefully on smaller viewports.
π¨ Visual Style Language
monochrome-contrast β High contrast baseline typography, fine hairline borders, and subtle interactive elevations.
β‘ Production Ready
100% pure Tailwind CSS utility classes with zero build steps or heavy node modules. Drop directly into React, Next.js, Vue, or HTML.
More Pricing Tables
Minimal Pricing Table
A classic three-column pricing table with monthly/annual toggle and stark Swiss typography.
Split Two Column Pricing
A two-column split layout with a feature comparison list, ideal for high-contrast decision making.
Centered Stacked Pricing
A single centered plan with a highlighted annual discount, perfect for simple product offers.