4 Tailwind2 with JSPublished 2026-10-05Free · no sign-up
Six pricing page sections: a monthly or yearly toggle, a feature comparison table, a single-plan card, selectable plan rows, a per-seat price calculator and a contact-sales band for larger customers.
A pricing header with a monthly or yearly switch made of two radio buttons styled as a pill. A small script swaps the prices, and the yearly option shows the saving in words.
document.querySelectorAll('input[name=twps1]').forEach(function (r) { r.onchange = function () { var y = r.value === 'y'; document.getElementById('twps1p').textContent = y ? '$288' : '$30'; document.getElementById('twps1u').textContent = y ? 'per year' : 'per month'; }; });
02. Tailwind Plan Comparison Table
TailwindPricingTable
A feature comparison across three plans as a real table, with ticks and dashes paired with hidden text so screen readers hear Included or Not included. The table scrolls sideways inside a focusable region on small screens.
When there is only one plan, the section can be one strong card: the price large, a short feature list with ticks and one button. A ring in the brand colour lifts it off the dark background.
Plans as a list of selectable rows, each a label wrapping a radio button, styled for the checked state with has-[:checked]. A compact pattern for checkout pages and narrow sidebars.
A pricing block where a slider sets the number of seats and the monthly total updates as you drag. The total sits in an output element tied to the slider, and the per-seat price is stated plainly.
var r = document.getElementById('twps5');
r.oninput = function () { document.getElementById('twps5n').textContent = r.value; document.getElementById('twps5t').textContent = '$' + r.value * 8; };
06. Tailwind Contact Sales Band
TailwindPricingCTA
The strip under the plans for larger customers: a short pitch, a few bullet points and a Talk to sales button, laid out with flex-wrap so the button drops under the text on narrow screens.
View code
<section class="flex w-full max-w-sm flex-wrap items-center justify-between gap-4 rounded-2xl bg-slate-900 p-5 text-white">
<div class="min-w-0 flex-[1_1_12rem]"><h3 class="text-lg font-bold">Need more than 50 seats?</h3><p class="mt-1 text-sm text-slate-300">Volume pricing, invoicing and a named contact.</p></div>
<a href="#sales" class="rounded-lg bg-white px-4 py-2 text-sm font-semibold text-slate-900 hover:bg-slate-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Talk to sales</a>
</section>
About these Tailwind Pricing Sections
Toggles are radios
A billing switch is a choice between options, so build it from radio buttons in a fieldset and style the checked label with has-[:checked]:.
Ticks need words
In comparison tables, pair each tick or dash with hidden text such as Included or Not included.
Say the unit
Write per month, per year or per seat next to every price; a bare number invites wrong guesses.
Tables on phones
Keep comparison tables as tables and let them scroll sideways inside a labelled, focusable region.
Frequently asked questions
Where are the pricing cards?
See the Tailwind pricing tables collection for plan cards.
Do the prices update with JavaScript?
The toggle and calculator use a few lines of script; the rest are static.