Cost Per User Breakdown — Free HTML CSS JS Snippet, Real Tiered Rates

Volume discounts on per-seat pricing are usually described in a sentence ("bigger teams get a better rate") without showing the actual mechanics. This snippet implements a genuine tiered, marginal rate table — the same structure income tax brackets use — where each pricing tier's rate applies only to the users that fall within that tier's range, not the whole team, and computes a live blended cost-per-user that visibly falls as team size grows into higher tiers.

A marginal-bracket rate table, not a lookup-and-multiply

TIERS defines four bands: users 1–10 at \$15 each, 11–25 at \$12 each, 26–50 at \$9 each, and 51+ at \$6 each. The naive (and incorrect) way to implement "tiered pricing" is to look up which single bracket a team size falls into and multiply the whole team by that one rate — but that produces a cliff-edge discontinuity where adding one user to cross a tier boundary would retroactively discount every existing user too. computeTieredCost() avoids that entirely: it walks the tiers in order, and for each one takes only Math.min(remaining, tierCapacity) users at that tier's rate, exactly like a marginal tax bracket only taxes the income within each bracket, not your whole income at your top bracket's rate.

Working through a real example

At a team size of 18: the first 10 users bill at \$15 each (\$150), and the remaining 8 users fall into the 11–25 tier at \$12 each (\$96) — for a total of \$246. The average cost per user is \$246 ÷ 18 = \$13.67, genuinely lower than the base \$15 rate, and genuinely computed by dividing the real tiered total by the real team size, not a separately estimated "roughly \$14ish" figure.

The visual bar reflects the blended rate, not a decoration

The per-user cost bar's width is computed as (avg / BASE_RATE) * 100 — the actual blended average expressed as a percentage of the smallest-tier rate. As team size grows and more users fall into cheaper tiers, this percentage genuinely drops and the bar visibly shrinks, giving an at-a-glance sense of "how much of a volume discount am I actually getting" that a bare number doesn't communicate as immediately.

Showing which tiers are actually in play

Beneath the totals, every tier renders with how many of the current team's users are billed at that tier's rate (usersInTier), and the tier the team size currently extends into is visually highlighted. This makes the abstract rate table concrete: rather than just trusting the blended average, a visitor can see exactly which \$15, \$12, \$9, or \$6 users make up their total.

Customizing it

Edit the TIERS array to add, remove, or reprice bands — computeTieredCost(), the totals, the bar, and the tier list all recalculate correctly for any tier configuration, since none of the downstream code assumes a fixed number of tiers.