Build a per-seat pricing card with Tailwind CSS. Centre a max-w-lg white card with rounded-2xl corners. The header holds a small "Team plan" pill, a headline price built from a large figure and a muted "per seat / month" suffix, and a one-line description. Under it a bordered control row: the label "How many seats?" on the left and on the right a stepper made of a minus button, a wide monospaced number and a plus button, with the minus disabled at the floor of two seats. Below, a summary block with three lines — seats times unit price, a volume discount line that only appears above ten seats, and a bold total — separated by a hairline. Finish with a full-width dark "Start 14-day trial" button, a muted note that seats can be changed any time and are billed pro rata, and three feature check rows. Then add JavaScript that steps the seat count between 2 and 250, applies a 10 percent discount from 10 seats and 20 percent from 50, recalculates every figure, shows or hides the discount line, and disables the minus button at the floor.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Build a per-seat pricing card with Tailwind CSS. Centre a max-w-lg white card with rounded-2xl corners. The header holds a small "Team plan" pill, a headline price built from a large figure and a muted "per seat / month" suffix, and a one-line description. Under it a bordered control row: the label "How many seats?" on the left and on the right a stepper made of a minus button, a wide monospaced number and a plus button, with the minus disabled at the floor of two seats. Below, a summary block with three lines — seats times unit price, a volume discount line that only appears above ten seats, and a bold total — separated by a hairline. Finish with a full-width dark "Start 14-day trial" button, a muted note that seats can be changed any time and are billed pro rata, and three feature check rows. Then add JavaScript that steps the seat count between 2 and 250, applies a 10 percent discount from 10 seats and 20 percent from 50, recalculates every figure, shows or hides the discount line, and disables the minus button at the floor.
var UNIT = 12;
var MIN = 2;
var MAX = 250;
var seats = 5;
var countEl = document.getElementById("seatCount");
var lineEl = document.getElementById("seatLine");
var subtotalEl = document.getElementById("seatSubtotal");
var totalEl = document.getElementById("seatTotal");
var row = document.getElementById("discountRow");
var label = document.getElementById("discountLabel");
var value = document.getElementById("discountValue");
var minus = document.getElementById("seatMinus");
var plus = document.getElementById("seatPlus");
function rate() {
if (seats >= 50) return 0.2;
if (seats >= 10) return 0.1;
return 0;
}
function money(n) {
return "$" + n.toLocaleString("en-US", { maximumFractionDigits: 0 });
}
function render() {
var subtotal = seats * UNIT;
var off = subtotal * rate();
countEl.textContent = seats;
lineEl.textContent = seats + (seats === 1 ? " seat × " : " seats × ") + money(UNIT);
subtotalEl.textContent = money(subtotal);
totalEl.textContent = money(subtotal - off);
// The discount line only earns its space once there is a discount.
row.classList.toggle("hidden", off === 0);
row.classList.toggle("flex", off > 0);
label.textContent = "Volume discount (" + Math.round(rate() * 100) + "%)";
value.textContent = "−" + money(off);
minus.disabled = seats <= MIN;
plus.disabled = seats >= MAX;
}
minus.addEventListener("click", function () {
seats = Math.max(MIN, seats - 1);
render();
});
plus.addEventListener("click", function () {
seats = Math.min(MAX, seats + 1);
render();
});
render();
