Pricing Tables – 8 Free CSS, Bootstrap & Tailwind Sets
Pricing Tables is a pack of eight sets of pricing tables and pricing page sections, designed and maintained in-house by uiCookies. Every set comes in three versions that look the same: plain HTML and CSS, Bootstrap 5 using its grid, .card, .btn-check, .table and .form-range where they fit, and Tailwind CSS 4. The sets cover tiered cards with a highlighted plan, a monthly and yearly billing switch, a feature comparison table, single-plan, lifetime and pay-what-you-want cards, usage-based calculators, editorial price lists for services, a dark set and a modern CSS set built on subgrid, :has() and container queries. Only the usage calculators use JavaScript.
A good pricing table lets a buyer compare plans without guessing. It lists the same features in the same order on every plan, so the eye can read across, and it shows what a plan does not include instead of quietly leaving it out. A tick or a cross is never the only signal: each one needs text such as Included or Not included for screen readers, and limits are written as numbers. The recommended plan is marked with a visible word, not just a brighter colour. A billing switch states the saving in plain words next to the prices, and a comparison table is a real table with row and column headers, whose header stays in view and whose scroll area can be reached with the keyboard on a phone.
