21 CSS Pricing Sections 21 / 21

Per-Seat Calculator

Real interactive math — adjust the seat count with native +/− buttons (proper <code>aria-label</code>) and the per-seat × seats × cycle cost recomputes live.

Light JS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="ps-cal" aria-label="Per-seat calculator">
  <header class="ps-cal-head">
    <span class="ps-cal-eye">Build your plan</span>
    <h2>Per-seat pricing, calculated live.</h2>
    <p>One number to change. Everything else updates with you.</p>
  </header>
  <div class="ps-cal-card">
    <div class="ps-cal-controls">
      <fieldset class="ps-cal-cycle">
        <legend class="ps-cal-sr">Billing cycle</legend>
        <input type="radio" name="ps-cal-cycle" id="ps-cal-m" checked />
        <label for="ps-cal-m">Monthly</label>
        <input type="radio" name="ps-cal-cycle" id="ps-cal-y" />
        <label for="ps-cal-y">Yearly · save 25%</label>
      </fieldset>
      <div class="ps-cal-stepper">
        <span class="ps-cal-stp-lbl">Team size</span>
        <div class="ps-cal-stp">
          <button type="button" class="ps-cal-btn" id="ps-cal-dec" aria-label="Decrease team size">
            −
          </button>
          <input
            type="number"
            id="ps-cal-seats"
            value="5"
            min="1"
            max="500"
            inputmode="numeric"
            pattern="[0-9]*"
            aria-label="Number of team members"
          />
          <button type="button" class="ps-cal-btn" id="ps-cal-inc" aria-label="Increase team size">
            +
          </button>
        </div>
        <span class="ps-cal-stp-hint">Up to 500 seats. Above that, we’ll talk.</span>
      </div>
    </div>
    <div class="ps-cal-summary">
      <div class="ps-cal-row"><span>Seats</span><strong id="ps-cal-out-seats">5</strong></div>
      <div class="ps-cal-row">
        <span>Per seat</span><strong id="ps-cal-out-per">$12 /mo</strong>
      </div>
      <div class="ps-cal-row"><span>Cycle</span><strong id="ps-cal-out-cyc">Monthly</strong></div>
      <hr />
      <div class="ps-cal-row ps-cal-total">
        <span>Total today</span>
        <strong id="ps-cal-out-total">$60.00</strong>
      </div>
      <p class="ps-cal-foot" id="ps-cal-out-foot">Billed monthly · cancel any time</p>
      <a class="ps-cal-cta" href="#start">Start 14-day trial →</a>
    </div>
  </div>
</section>
.ps-cal {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(99,102,241,0.18), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(56,189,248,0.14), transparent 60%),
    #07091a;
  color: #e6e9ff;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-cal-head { text-align: center; margin-bottom: clamp(24px, 4vw, 36px); }
.ps-cal-eye {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #818cf8; padding: 5px 12px;
  background: rgba(129,140,248,0.12);
  border: 1px solid rgba(129,140,248,0.28);
  border-radius: 999px; margin-bottom: 14px;
}
.ps-cal-head h2 {
  font-size: clamp(22px, 3.4vw, 32px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px; color: #fff;
}
.ps-cal-head p { color: #9aa3c8; margin: 0; font-size: 14px; }
.ps-cal-card {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 0;
  max-width: 820px; margin: 0 auto;
  background: rgba(20,22,48,0.7);
  border: 1px solid rgba(129,140,248,0.2);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
}
.ps-cal-controls {
  padding: clamp(22px, 4vw, 32px);
  border-right: 1px solid rgba(129,140,248,0.15);
  display: flex; flex-direction: column; gap: 22px;
}
.ps-cal-summary {
  padding: clamp(22px, 4vw, 32px);
  background: linear-gradient(180deg, rgba(99,102,241,0.1), rgba(56,189,248,0.06));
  display: flex; flex-direction: column;
}
.ps-cal-cycle {
  border: 1px solid rgba(129,140,248,0.2);
  border-radius: 10px; padding: 4px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: rgba(7,9,26,0.4);
  margin: 0;
}
.ps-cal-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ps-cal-cycle input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.ps-cal-cycle label {
  text-align: center; padding: 9px 12px;
  font-size: 12.5px; font-weight: 600; color: #9aa3c8;
  cursor: pointer; border-radius: 7px;
  transition: background 0.18s, color 0.18s;
}
.ps-cal-cycle input:checked + label {
  background: linear-gradient(135deg, #6366f1, #38bdf8); color: #fff;
}
.ps-cal-cycle input:focus-visible + label { outline: 2px solid #818cf8; outline-offset: 2px; }
.ps-cal-stp-lbl {
  display: block; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #9aa3c8; margin-bottom: 8px;
}
.ps-cal-stp {
  display: grid; grid-template-columns: 44px 1fr 44px;
  border: 1px solid rgba(129,140,248,0.25);
  border-radius: 10px; overflow: hidden;
  background: rgba(7,9,26,0.5);
}
.ps-cal-btn {
  background: transparent; border: 0; cursor: pointer;
  font-size: 22px; font-weight: 700; color: #818cf8;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.ps-cal-btn:hover { background: rgba(129,140,248,0.15); color: #fff; }
.ps-cal-btn:focus-visible { outline: 2px solid #818cf8; outline-offset: -2px; }
.ps-cal-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ps-cal-stp input[type="number"] {
  background: transparent; border: 0; outline: 0;
  text-align: center; color: #fff;
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  font-family: inherit;
  border-left: 1px solid rgba(129,140,248,0.18);
  border-right: 1px solid rgba(129,140,248,0.18);
  -moz-appearance: textfield;
}
.ps-cal-stp input::-webkit-outer-spin-button,
.ps-cal-stp input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.ps-cal-stp input:focus-visible { background: rgba(129,140,248,0.12); }
.ps-cal-stp-hint { display: block; font-size: 11.5px; color: #6c759b; margin-top: 8px; }
.ps-cal-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0;
  font-size: 13.5px;
}
.ps-cal-row span { color: #9aa3c8; }
.ps-cal-row strong { color: #fff; font-weight: 600; }
.ps-cal-summary hr { border: 0; border-top: 1px dashed rgba(129,140,248,0.25); margin: 4px 0; }
.ps-cal-total span { color: #93c5fd; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.ps-cal-total strong {
  font-size: clamp(28px, 4vw, 38px); font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(90deg, #818cf8, #38bdf8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ps-cal-foot { font-size: 12px; color: #6c759b; margin: 4px 0 16px; }
.ps-cal-cta {
  display: block; text-align: center;
  padding: 12px 18px; border-radius: 10px;
  background: linear-gradient(135deg, #6366f1, #38bdf8);
  color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 700;
  margin-top: auto;
  box-shadow: 0 10px 24px rgba(99,102,241,0.3);
  transition: transform 0.18s;
}
.ps-cal-cta:hover { transform: translateY(-1px); }
.ps-cal-cta:focus-visible { outline: 2px solid #818cf8; outline-offset: 3px; }
@media (max-width: 720px) {
  .ps-cal-card { grid-template-columns: 1fr; }
  .ps-cal-controls { border-right: 0; border-bottom: 1px solid rgba(129,140,248,0.15); }
}
@media (prefers-reduced-motion: reduce) {
  .ps-cal-cta, .ps-cal-btn, .ps-cal-cycle label { transition: none; }
}
(function () {
  var seats   = document.getElementById('ps-cal-seats');
  var dec     = document.getElementById('ps-cal-dec');
  var inc     = document.getElementById('ps-cal-inc');
  var rM      = document.getElementById('ps-cal-m');
  var rY      = document.getElementById('ps-cal-y');
  var outSeats= document.getElementById('ps-cal-out-seats');
  var outPer  = document.getElementById('ps-cal-out-per');
  var outCyc  = document.getElementById('ps-cal-out-cyc');
  var outTot  = document.getElementById('ps-cal-out-total');
  var outFoot = document.getElementById('ps-cal-out-foot');
  if (!seats || !inc) return;

  var BASE_MONTHLY = 12;       // $12 / seat / mo
  var YEARLY_DISC  = 0.25;     // 25% off when yearly

  function clamp(v) {
    if (isNaN(v) || v < 1) return 1;
    if (v > 500) return 500;
    return v;
  }
  function fmt(n) { return '$' + n.toFixed(2); }

  function update() {
    var n = clamp(parseInt(seats.value, 10));
    seats.value = n;
    var yearly = rY.checked;
    var per    = yearly ? BASE_MONTHLY * (1 - YEARLY_DISC) : BASE_MONTHLY;
    var months = yearly ? 12 : 1;
    var total  = per * n * months;

    outSeats.textContent = n + (n === 1 ? ' member' : ' members');
    outPer.textContent   = '$' + per.toFixed(2) + ' / mo';
    outCyc.textContent   = yearly ? 'Yearly (–25%)' : 'Monthly';
    outTot.textContent   = fmt(total);
    outFoot.textContent  = yearly
      ? 'Billed yearly · ' + fmt(total) + ' once, then renews annually'
      : 'Billed monthly · cancel any time';

    dec.disabled = n <= 1;
    inc.disabled = n >= 500;
  }

  dec.addEventListener('click', function () { seats.value = clamp(parseInt(seats.value, 10) - 1); update(); });
  inc.addEventListener('click', function () { seats.value = clamp(parseInt(seats.value, 10) + 1); update(); });
  seats.addEventListener('input', update);
  rM.addEventListener('change', update);
  rY.addEventListener('change', update);
  update();
})();

More from 21 CSS Pricing Sections

Spotlight PricingUsage SliderAnimated Border CardsEditorial Two Column3D Tilt CardsSynthwave NeonPay What You WantCurrency SwitcherSocial Proof PricingFeature Accordion TiersAnnual Savings StripeClassic Three Tier
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →