5 Pure CSS2 with JSPublished 2026-10-05Free · no sign-up
Seven pricing page sections: three tiers with a highlighted plan, a monthly and yearly switch, a single all-inclusive plan, a feature comparison table, a usage-based estimator, plans followed by billing questions and self-serve plans with an enterprise banner.
A full pricing section: heading, one-line promise and three plans with the middle one highlighted as Most popular. The plans are a list, the price is real text with the period, and the recommended plan says so in words, not just colour.
View code
<section class="prs1" aria-labelledby="prs1h"><h3 id="prs1h">Simple pricing</h3><p class="sub">Start free. Upgrade when you need more.</p><ul><li><b>Free</b><p class="pr">$0</p><a href="#free">Start</a></li><li class="hi"><span class="tag">Most popular</span><b>Pro</b><p class="pr">$12<small>/mo</small></p><a href="#pro">Choose Pro</a></li><li><b>Team</b><p class="pr">$29<small>/mo</small></p><a href="#team">Choose Team</a></li></ul></section>
A billing switch above the plans swaps every price between monthly and yearly and shows the saving. The switch is a real switch with role="switch" and aria-checked, and prices are stored in data attributes so the script only swaps text.
var b = document.querySelector('.prs2 button');
b.onclick = function () { var y = b.getAttribute('aria-checked') !== 'true'; b.setAttribute('aria-checked', y); document.querySelectorAll('.prs2 .v').forEach(function (v) { v.textContent = y ? v.dataset.y : v.dataset.m; }); };
03. One Plan, Everything Included
PricingSimple
Some products only need one price. A single card with the price, a checklist of everything included and one button removes all comparison effort, which is often the best-converting pricing page there is.
A feature-by-feature comparison below the plan cards. It is a real table with row and column headers, the ticks and dashes carry hidden text (Included, Not included), and the wrapper scrolls sideways on small screens.
For pay-as-you-go pricing, a slider for the expected volume and a live estimate beside it. The slider is a native range input with a label, and the estimate is an output element linked to it, updated on every input event.
View code
<section class="prs5"><label for="prs5r">Emails per month: <b id="prs5n">20,000</b></label><input id="prs5r" type="range" min="1000" max="100000" step="1000" value="20000"><p>Estimated cost <output for="prs5r">$16</output> / month</p><p class="n">First 1,000 free, then $0.80 per 1,000.</p></section>
var r = document.getElementById('prs5r'), n = document.getElementById('prs5n'), o = document.querySelector('.prs5 output');
r.oninput = function () { var v = +r.value; n.textContent = v.toLocaleString('en-US'); o.textContent = '$' + Math.max(0, Math.round((v - 1000) / 1000 * 0.8)); };
r.oninput();
06. Pricing with Questions Below
PricingFAQ
Pricing pages lose people at the last doubt, so the most common billing questions sit right under the plans in details and summary elements. Each answer is short and specific, and the disclosure works with no script.
View code
<section class="prs6"><div class="plans"><div><b>Basic</b><span>$5/mo</span></div><div><b>Plus</b><span>$15/mo</span></div></div><h3>Billing questions</h3><details><summary>Can I change plans later?</summary><p>Yes, upgrades apply at once and downgrades at the next renewal.</p></details><details><summary>Do you offer refunds?</summary><p>Yes, within 30 days of any payment.</p></details></section>
Self-serve plans above a full-width banner for larger customers with a Talk to sales link. Separating the enterprise offer keeps the plan cards simple, and the banner reflows from a row to a stack on narrow containers.
View code
<section class="prs7"><div class="in"><ul><li><b>Team</b><span>$29/mo</span></li><li><b>Business</b><span>$79/mo</span></li></ul><div class="ent"><div><b>Enterprise</b><p>SSO, custom contracts and a dedicated manager.</p></div><a href="#sales">Talk to sales</a></div></div></section>
Write prices as real text with their period (per month, per year) so they can be read, copied and translated. Do not show the price only inside an image.
Say which plan you recommend
A Most popular label in words tells everyone which plan you suggest; a coloured border alone does not. Keep it to one plan.
Billing switches are switches
A monthly and yearly toggle is a role="switch" button with aria-checked, or a pair of radio buttons. Show the saving next to it so the choice is easy.
Answer doubts on the page
The last objections are usually about billing: changing plans, refunds, taxes. Put short answers right under the plans instead of sending people to another page.
Frequently asked questions
How is this different from the pricing tables collection?
Pricing tables focuses on the cards; this collection covers whole sections around them.
Should prices include tax?
Follow your market's rules and say clearly whether tax is included.
Is the estimator accurate?
It uses example rates; replace the formula with your own pricing.