webdevpuneet.com

Related Snippets

57 in Pricing category
22–27 of 57

Cost Per User Breakdown

Lifetime Deal Pricing Card

Pricing Model Toggle (Per-Seat vs Per-Usage)

Dense Feature Comparison Matrix

Cancellation Retention Offer

Transparent Fees Breakdown

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

Cost Per User Breakdown · Pricing · Plain HTML, CSS & JS · Live preview

CategoryPricing
TagsLanding PageCSS Grid

Copy & paste

Source Code

<div class="cpu-wrap">
  <div class="cpu-card">
    <p class="cpu-eyebrow">Team plan</p>
    <h2 class="cpu-title">Cost per user, with volume discounts</h2>

    <label class="cpu-label" for="cpuTeamSize">Team size</label>
    <div class="cpu-input-row">
      <button class="cpu-step" id="cpuMinus" type="button" aria-label="Decrease team size">−</button>
      <input class="cpu-input" id="cpuTeamSize" type="number" min="1" max="200" value="18" />
      <button class="cpu-step" id="cpuPlus" type="button" aria-label="Increase team size">+</button>
    </div>

    <div class="cpu-totals">
      <div class="cpu-total-box">
        <p class="cpu-total-label">Total monthly cost</p>
        <p class="cpu-total-value" id="cpuTotal">—</p>
      </div>
      <div class="cpu-total-box cpu-total-highlight">
        <p class="cpu-total-label">Avg. cost per user / month</p>
        <p class="cpu-total-value" id="cpuAvg">—</p>
      </div>
    </div>

    <div class="cpu-bar-section">
      <p class="cpu-bar-label">Per-user rate, relative to the base tier</p>
      <div class="cpu-bar-track"><div class="cpu-bar-fill" id="cpuBarFill"></div></div>
      <p class="cpu-bar-caption" id="cpuBarCaption"></p>
    </div>

    <div class="cpu-tiers" id="cpuTiers">
      <p class="cpu-tiers-title">Volume discount tiers</p>
    </div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Genuine marginal-bracket pricing
Each tier's rate applies only to users within that band.
No cliff-edge discontinuity
Crossing a boundary never retroactively re-prices earlier users.
Live blended average
Real total divided by real team size, recalculated on every change.
Bar reflects the real rate
Width is the actual blended rate as a percent of the base tier.
Per-tier usage breakdown
Shows exactly how many users are billed at each rate.
Active-tier highlighting
Visually marks which band the current team size extends into.
Clamped input range
Team size bounded to a sane 1–200 range.
Configurable tier table
Add or reprice bands with no other code changes needed.

About this UI Snippet

Cost Per User Breakdown — A Real Tiered Rate Table, Not a Flat Multiply

Screenshot of the Cost Per User Breakdown snippet rendered live

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.

Step by step

How to Use

  1. 1
    Adjust the team sizeUse the steppers or type a value between 1 and 200.
  2. 2
    Watch the total and average updateBoth are computed live from the real tiered rate table.
  3. 3
    Check the per-user barIts width reflects the blended rate as a percent of the base tier.
  4. 4
    See which tiers are billedThe tier list shows exactly how many users fall in each band.
  5. 5
    Cross a tier boundaryMove from 10 to 11 users and see the average drop as the new tier applies.
  6. 6
    Edit the TIERS arrayAdd, remove, or reprice bands — every computed value adapts automatically.

Real-world uses

Common Use Cases

Team and workspace pricing
Show volume-discounted per-seat prices with a genuine marginal-bracket table, where each tier's rate applies only to the users inside that bracket.
Seat calculator pairing
Pair with a seat-based pricing calculator so buyers see both the total and the falling blended cost per user as the team grows.
Enterprise sales conversations
Justify tiered pricing with a verifiable breakdown, since crossing a boundary never retroactively re-prices earlier users and so creates no cliff edge.
Billing dashboards for customers
Show existing customers their effective rate today, calculated as the real total divided by the real team size on every change.
Marginal-bracket logic teaching
Use as a clean reference implementation of progressive tax-style brackets, with a bar whose width is the actual blended rate as a percentage of the base.
Related: Commitment Length Discount Ladder
See the Commitment Length Discount Ladder for a related pricing pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

It is a genuine marginal-bracket structure: computeTieredCost() walks the TIERS array in order and bills only the users that fall within each band at that band's rate, using Math.min(remaining, tierCapacity) per tier. This is structurally identical to how income tax brackets work — it is not a lookup that finds one matching tier and multiplies the whole team by that single rate.

Because only the users within each tier's range are billed at that tier's rate — the first 10 users always cost $15 each regardless of total team size, and only users beyond 10 start billing at the lower $12 rate. This avoids the cliff-edge problem where crossing from 10 to 11 users would otherwise have to decide whether to re-price all 11 users at the new rate or just the new one, producing a jarring discontinuity either way.

Yes: the first 10 users bill at $15 each for $150, and the remaining 8 users (18 minus 10) fall into the 11–25 tier at $12 each for $96. $150 plus $96 is $246 total, and $246 divided by 18 users is $13.67 average cost per user — both figures are the direct output of computeTieredCost() and the division that follows it, not separately estimated.

It is the blended average cost per user (total divided by team size) expressed as a percentage of the base, smallest-tier rate ($15). As team size grows and more users fall into cheaper tiers, this blended average drops below the base rate and the percentage — and the bar's visual width — shrink accordingly, giving an immediate visual sense of how much volume discount is currently being applied.

Edit the TIERS array — add an object with an upTo boundary, a rate, and a label in the correct ascending order (or adjust an existing entry's rate or upTo value). Because computeTieredCost() and the rendering code iterate over TIERS generically rather than assuming exactly four bands, every computed total, average, bar width, and tier-usage line adapts automatically to the new configuration.