Open demo

CSS code

HTML 
<div><span class="lbl">Monthly or yearly, three plans</span>
<section class="bt" aria-labelledby="tm-title">
  <header class="bt-head"><p class="bt-kicker">Trailmark pricing</p><h2 class="bt-title" id="tm-title">Plan every project in one place</h2><p class="bt-sub">Prices are per workspace, in US dollars. Every plan starts with a 14-day free trial.</p></header>
  <div class="bt-ctl">
  <fieldset class="bt-switch"><legend class="sr-only">Billing period</legend>
    <label><input type="radio" name="tm-billing" value="monthly" checked><span>Monthly</span></label>
    <label><input type="radio" name="tm-billing" value="yearly"><span>Yearly <em>Save 20%</em></span></label>
  </fieldset>
  <p class="bt-save">Yearly billing costs 20% less on every plan.</p>
  </div>
  <div class="bt-grid">
    <article class="bt-card" aria-labelledby="tm-basic">
      <div class="bt-top"><h3 id="tm-basic">Basic</h3></div>
      <p class="bt-desc">For one project and a small crew.</p>
      <p class="bt-price"><span class="bt-amt bt-m">$10</span><span class="bt-amt bt-y">$8</span><span class="bt-per">per month</span></p>
      <p class="bt-note bt-m">Billed monthly. Cancel any time.</p><p class="bt-note bt-y">Billed $96 a year. You save $24.</p>
      <a class="bt-btn" href="#">Choose Basic</a>
      <ul class="bt-list">
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>3 projects</span></li>
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>5 members</span></li>
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Board and list views</span></li>
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>2 GB of file storage</span></li>
      </ul>
    </article>
    <article class="bt-card is-rec" aria-labelledby="tm-team">
      <div class="bt-top"><h3 id="tm-team">Team</h3><p class="bt-badge">Recommended</p></div>
      <p class="bt-desc">For teams running several projects at once.</p>
      <p class="bt-price"><span class="bt-amt bt-m">$25</span><span class="bt-amt bt-y">$20</span><span class="bt-per">per month</span></p>
      <p class="bt-note bt-m">Billed monthly. Cancel any time.</p><p class="bt-note bt-y">Billed $240 a year. You save $60.</p>
      <a class="bt-btn" href="#">Choose Team</a>
      <ul class="bt-list">
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Unlimited projects</span></li>
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>25 members</span></li>
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Timeline and workload views</span></li>
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>50 GB of file storage</span></li>
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Guest access for clients</span></li>
      </ul>
    </article>
    <article class="bt-card" aria-labelledby="tm-business">
      <div class="bt-top"><h3 id="tm-business">Business</h3></div>
      <p class="bt-desc">For departments that report across projects.</p>
      <p class="bt-price"><span class="bt-amt bt-m">$60</span><span class="bt-amt bt-y">$48</span><span class="bt-per">per month</span></p>
      <p class="bt-note bt-m">Billed monthly. Cancel any time.</p><p class="bt-note bt-y">Billed $576 a year. You save $144.</p>
      <a class="bt-btn" href="#">Choose Business</a>
      <ul class="bt-list">
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Unlimited projects</span></li>
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Unlimited members</span></li>
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Portfolio reporting</span></li>
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>500 GB of file storage</span></li>
        <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>SAML single sign-on</span></li>
      </ul>
    </article>
  </div>
</section></div>

<div><span class="lbl">Three billing periods, wide rows</span>
<section class="bt" aria-labelledby="hs-title">
  <header class="bt-bar"><div><p class="bt-kicker">Harbor Static</p><h2 class="bt-title" id="hs-title">Hosting for static sites</h2><p class="bt-sub">Pay monthly, or save 10% quarterly and 20% yearly.</p></div>
  <fieldset class="bt-switch three"><legend class="sr-only">Billing period</legend>
    <label><input type="radio" name="hs-billing" value="monthly" checked><span>Monthly</span></label>
    <label><input type="radio" name="hs-billing" value="quarterly"><span>Quarterly <em>Save 10%</em></span></label>
    <label><input type="radio" name="hs-billing" value="yearly"><span>Yearly <em>Save 20%</em></span></label>
  </fieldset>
  </header>
  <div class="bt-rows">
    <article class="bt-row" aria-labelledby="hs-starter">
      <div>
        <h3 id="hs-starter">Starter</h3>
        <p class="bt-desc">For personal sites, portfolios and docs.</p>
        <ul class="bt-list">
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>3 sites</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>100 GB bandwidth a month</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Custom domains with HTTPS</span></li>
        </ul>
      </div>
      <div>
        <p class="bt-price"><span class="bt-amt bt-m">$15</span><span class="bt-amt bt-q">$13.50</span><span class="bt-amt bt-y">$12</span><span class="bt-per">per month</span></p>
        <p class="bt-note bt-m">Billed $15 every month.</p><p class="bt-note bt-q">Billed $40.50 every 3 months. You save $4.50.</p><p class="bt-note bt-y">Billed $144 a year. You save $36.</p>
        <a class="bt-btn" href="#">Start on Starter</a>
      </div>
    </article>
    <article class="bt-row" aria-labelledby="hs-agency">
      <div>
        <h3 id="hs-agency">Agency</h3>
        <p class="bt-desc">For studios hosting client sites.</p>
        <ul class="bt-list">
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>25 sites</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>1 TB bandwidth a month</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Preview deploys and password protection</span></li>
        </ul>
      </div>
      <div>
        <p class="bt-price"><span class="bt-amt bt-m">$40</span><span class="bt-amt bt-q">$36</span><span class="bt-amt bt-y">$32</span><span class="bt-per">per month</span></p>
        <p class="bt-note bt-m">Billed $40 every month.</p><p class="bt-note bt-q">Billed $108 every 3 months. You save $12.</p><p class="bt-note bt-y">Billed $384 a year. You save $96.</p>
        <a class="bt-btn" href="#">Start on Agency</a>
      </div>
    </article>
  </div>
</section></div>
CSS 
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Billing toggle: radio buttons in a fieldset switch the prices with :has(); no JavaScript. */
.bt{--bt-accent:#0f766e;--bt-accent-dark:#115e59;--bt-ink:#0b2b29;--bt-muted:#4b5e5b;--bt-line:#d5e3e0;--bt-edge:#7d948f;--bt-chip:#ccfbf1;--bt-radius:20px;color:var(--bt-ink)}
.bt *,.bt *::before,.bt *::after{box-sizing:border-box}
/* what switches: .bt-m (monthly) is shown by default, .bt-q / .bt-y when their radio is checked */
.bt-q,.bt-y{display:none}
.bt:has(input[value=quarterly]:checked) .bt-m,.bt:has(input[value=yearly]:checked) .bt-m{display:none}
.bt:has(input[value=quarterly]:checked) .bt-q,.bt:has(input[value=yearly]:checked) .bt-y{display:revert;animation:bt-in .3s ease-out}
@keyframes bt-in{from{opacity:0;transform:translateY(-4px)}}
.bt-head{max-width:640px;margin:0 auto;text-align:center}
.bt-kicker{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bt-accent)}
.bt-title{margin:10px 0 0;font-size:clamp(1.65rem,4vw,2.3rem);font-weight:800;line-height:1.15;letter-spacing:-.025em}
.bt-sub{margin:12px 0 0;font-size:1rem;line-height:1.55;color:var(--bt-muted)}
.bt-ctl{display:flex;flex-direction:column;align-items:center;gap:12px;margin:28px 0 40px}
.bt-save{margin:0;font-size:.88rem;line-height:1.4;color:var(--bt-muted)}
/* segmented control */
.bt-switch{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px;min-width:0;margin:0;padding:4px;border:1px solid var(--bt-edge);border-radius:999px;background:#fff}
.bt-switch label{position:relative;cursor:pointer}
.bt-switch input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.bt-switch span{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;font-size:.92rem;font-weight:700;line-height:1.3;color:var(--bt-muted);transition:background-color .2s,color .2s}
.bt-switch label:hover span{color:var(--bt-ink)}
.bt-switch input:checked+span{background:var(--bt-accent);color:#fff}
.bt-switch input:focus-visible+span{outline:2px solid var(--bt-accent);outline-offset:3px}
@media (max-width:639.98px){.bt-switch.three{display:flex;flex-wrap:nowrap;width:100%;border-radius:18px}.bt-switch.three label{flex:1}.bt-switch.three span{display:flex;height:100%;flex-direction:column;justify-content:center;gap:3px;padding:8px 10px;border-radius:14px}}
.bt-switch em{padding:3px 8px;border-radius:999px;background:var(--bt-chip);color:var(--bt-accent-dark);font-size:.72rem;font-style:normal;font-weight:800;line-height:1.2}
/* plan cards */
.bt-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:992px){.bt-grid{grid-template-columns:repeat(3,1fr)}}
.bt-card{position:relative;display:flex;flex-direction:column;padding:30px 28px;background:#fff;border:1px solid var(--bt-line);border-radius:var(--bt-radius)}
@media (min-width:992px){.bt-card .bt-desc{min-height:3em}}
.bt-card.is-rec{padding:29px 27px;border:2px solid var(--bt-accent);box-shadow:0 22px 44px -24px rgba(15,118,110,.55)}
.bt-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.bt-card h3{margin:0;font-size:1.2rem;font-weight:700;line-height:1.3}
.bt-badge{margin:0;padding:5px 10px;border-radius:999px;background:var(--bt-accent);color:#fff;font-size:.7rem;font-weight:800;line-height:1.1;letter-spacing:.08em;text-transform:uppercase}
.bt-desc{margin:8px 0 0;font-size:.92rem;line-height:1.5;color:var(--bt-muted)}
.bt-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:22px 0 0}
.bt-amt{font-size:2.8rem;font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.bt-per{font-size:.9rem;color:var(--bt-muted)}
.bt-note{margin:8px 0 0;min-height:1.4em;font-size:.84rem;line-height:1.4;color:var(--bt-muted)}
.bt-note.bt-y,.bt-note.bt-q{color:var(--bt-accent-dark);font-weight:600}
.bt-btn{display:block;margin:22px 0 0;padding:12px 18px;border:1.5px solid var(--bt-accent);border-radius:12px;background:#fff;color:var(--bt-accent-dark);font-size:.95rem;font-weight:700;line-height:1.4;text-align:center;text-decoration:none;transition:background-color .2s,color .2s}
.bt-btn:hover{background:#e6f4f1}
.bt-btn:focus-visible{outline:3px solid var(--bt-accent);outline-offset:3px}
.is-rec .bt-btn{background:var(--bt-accent);color:#fff}
.is-rec .bt-btn:hover{background:var(--bt-accent-dark)}
.bt-list{display:grid;gap:11px;margin:24px 0 0;padding:22px 0 0;border-top:1px solid var(--bt-line);list-style:none;font-size:.92rem;line-height:1.4}
.bt-list li{display:flex;align-items:flex-start;gap:10px}
.bt-list svg{flex:none;margin-top:1px;color:var(--bt-accent)}
/* wide rows (three billing periods) */
.bt-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 32px;margin:0 0 28px}
.bt-bar .bt-title{margin-top:6px;font-size:clamp(1.5rem,3.4vw,1.9rem)}
.bt-bar .bt-sub{margin-top:8px;font-size:.92rem}
.bt-rows{display:grid;gap:16px}
.bt-row{display:grid;grid-template-columns:1fr;gap:20px 32px;padding:26px 28px;background:#fff;border:1px solid var(--bt-line);border-radius:var(--bt-radius)}
@media (min-width:768px){.bt-row{grid-template-columns:1fr 260px;align-items:center}}
.bt-row .bt-list{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;padding:0;border:0}
.bt-row .bt-price{margin:0}
.bt-row .bt-btn{margin-top:16px}
@media (prefers-reduced-motion:reduce){.bt-switch span,.bt-btn{transition:none}.bt:has(input:checked) .bt-q,.bt:has(input:checked) .bt-y{animation:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Monthly or yearly, three plans</span>
<section class="bt" aria-labelledby="tm-title">
  <header class="bt-head text-center"><p class="bt-kicker">Trailmark pricing</p><h2 class="bt-title" id="tm-title">Plan every project in one place</h2><p class="bt-sub">Prices are per workspace, in US dollars. Every plan starts with a 14-day free trial.</p></header>
  <div class="bt-ctl d-flex flex-column align-items-center">
  <fieldset class="bt-switch"><legend class="visually-hidden">Billing period</legend>
    <input type="radio" class="btn-check" name="tm-billing" id="tm-billing-monthly" value="monthly" checked><label class="btn" for="tm-billing-monthly">Monthly</label>
    <input type="radio" class="btn-check" name="tm-billing" id="tm-billing-yearly" value="yearly"><label class="btn" for="tm-billing-yearly">Yearly <span class="badge rounded-pill">Save 20%</span></label>
  </fieldset>
  <p class="bt-save">Yearly billing costs 20% less on every plan.</p>
  </div>
  <div class="row row-cols-1 row-cols-lg-3 g-4">
    <div class="col"><article class="card bt-card h-100" aria-labelledby="tm-basic"><div class="card-body d-flex flex-column">
        <div class="bt-top d-flex flex-wrap align-items-center justify-content-between"><h3 id="tm-basic">Basic</h3></div>
        <p class="bt-desc">For one project and a small crew.</p>
        <p class="bt-price d-flex flex-wrap align-items-baseline"><span class="bt-amt bt-m">$10</span><span class="bt-amt bt-y">$8</span><span class="bt-per">per month</span></p>
        <p class="bt-note bt-m">Billed monthly. Cancel any time.</p><p class="bt-note bt-y">Billed $96 a year. You save $24.</p>
        <a class="btn bt-btn d-block w-100" href="#">Choose Basic</a>
        <ul class="bt-list list-unstyled">
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>3 projects</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>5 members</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>Board and list views</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>2 GB of file storage</span></li>
        </ul>
      </div></article></div>
    <div class="col"><article class="card bt-card h-100 is-rec" aria-labelledby="tm-team"><div class="card-body d-flex flex-column">
        <div class="bt-top d-flex flex-wrap align-items-center justify-content-between"><h3 id="tm-team">Team</h3><p class="badge rounded-pill bt-badge">Recommended</p></div>
        <p class="bt-desc">For teams running several projects at once.</p>
        <p class="bt-price d-flex flex-wrap align-items-baseline"><span class="bt-amt bt-m">$25</span><span class="bt-amt bt-y">$20</span><span class="bt-per">per month</span></p>
        <p class="bt-note bt-m">Billed monthly. Cancel any time.</p><p class="bt-note bt-y">Billed $240 a year. You save $60.</p>
        <a class="btn bt-btn d-block w-100" href="#">Choose Team</a>
        <ul class="bt-list list-unstyled">
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>Unlimited projects</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>25 members</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>Timeline and workload views</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>50 GB of file storage</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>Guest access for clients</span></li>
        </ul>
      </div></article></div>
    <div class="col"><article class="card bt-card h-100" aria-labelledby="tm-business"><div class="card-body d-flex flex-column">
        <div class="bt-top d-flex flex-wrap align-items-center justify-content-between"><h3 id="tm-business">Business</h3></div>
        <p class="bt-desc">For departments that report across projects.</p>
        <p class="bt-price d-flex flex-wrap align-items-baseline"><span class="bt-amt bt-m">$60</span><span class="bt-amt bt-y">$48</span><span class="bt-per">per month</span></p>
        <p class="bt-note bt-m">Billed monthly. Cancel any time.</p><p class="bt-note bt-y">Billed $576 a year. You save $144.</p>
        <a class="btn bt-btn d-block w-100" href="#">Choose Business</a>
        <ul class="bt-list list-unstyled">
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>Unlimited projects</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>Unlimited members</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>Portfolio reporting</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>500 GB of file storage</span></li>
          <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>SAML single sign-on</span></li>
        </ul>
      </div></article></div>
  </div>
</section></div>

<div><span class="lbl">Three billing periods, wide rows</span>
<section class="bt" aria-labelledby="hs-title">
  <header class="bt-bar d-flex flex-wrap align-items-end justify-content-between"><div><p class="bt-kicker">Harbor Static</p><h2 class="bt-title" id="hs-title">Hosting for static sites</h2><p class="bt-sub">Pay monthly, or save 10% quarterly and 20% yearly.</p></div>
  <fieldset class="bt-switch three"><legend class="visually-hidden">Billing period</legend>
    <input type="radio" class="btn-check" name="hs-billing" id="hs-billing-monthly" value="monthly" checked><label class="btn" for="hs-billing-monthly">Monthly</label>
    <input type="radio" class="btn-check" name="hs-billing" id="hs-billing-quarterly" value="quarterly"><label class="btn" for="hs-billing-quarterly">Quarterly <span class="badge rounded-pill">Save 10%</span></label>
    <input type="radio" class="btn-check" name="hs-billing" id="hs-billing-yearly" value="yearly"><label class="btn" for="hs-billing-yearly">Yearly <span class="badge rounded-pill">Save 20%</span></label>
  </fieldset>
  </header>
  <div class="d-grid gap-3">
    <article class="card bt-row" aria-labelledby="hs-starter"><div class="card-body"><div class="row align-items-center">
        <div class="col-12 col-md">
          <h3 id="hs-starter">Starter</h3>
          <p class="bt-desc">For personal sites, portfolios and docs.</p>
          <ul class="bt-list list-unstyled">
              <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>3 sites</span></li>
              <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>100 GB bandwidth a month</span></li>
              <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>Custom domains with HTTPS</span></li>
          </ul>
        </div>
        <div class="col-12 col-md-auto bt-side">
          <p class="bt-price d-flex flex-wrap align-items-baseline"><span class="bt-amt bt-m">$15</span><span class="bt-amt bt-q">$13.50</span><span class="bt-amt bt-y">$12</span><span class="bt-per">per month</span></p>
          <p class="bt-note bt-m">Billed $15 every month.</p><p class="bt-note bt-q">Billed $40.50 every 3 months. You save $4.50.</p><p class="bt-note bt-y">Billed $144 a year. You save $36.</p>
          <a class="btn bt-btn d-block w-100" href="#">Start on Starter</a>
        </div>
      </div></div></article>
    <article class="card bt-row" aria-labelledby="hs-agency"><div class="card-body"><div class="row align-items-center">
        <div class="col-12 col-md">
          <h3 id="hs-agency">Agency</h3>
          <p class="bt-desc">For studios hosting client sites.</p>
          <ul class="bt-list list-unstyled">
              <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>25 sites</span></li>
              <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>1 TB bandwidth a month</span></li>
              <li><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="visually-hidden">Included: </span>Preview deploys and password protection</span></li>
          </ul>
        </div>
        <div class="col-12 col-md-auto bt-side">
          <p class="bt-price d-flex flex-wrap align-items-baseline"><span class="bt-amt bt-m">$40</span><span class="bt-amt bt-q">$36</span><span class="bt-amt bt-y">$32</span><span class="bt-per">per month</span></p>
          <p class="bt-note bt-m">Billed $40 every month.</p><p class="bt-note bt-q">Billed $108 every 3 months. You save $12.</p><p class="bt-note bt-y">Billed $384 a year. You save $96.</p>
          <a class="btn bt-btn d-block w-100" href="#">Start on Agency</a>
        </div>
      </div></div></article>
  </div>
</section></div>
CSS 
/* Billing toggle: Bootstrap .btn-check radios in a fieldset switch the prices with :has(); cards are .card, buttons .btn. */
.bt{--bt-accent:#0f766e;--bt-accent-dark:#115e59;--bt-ink:#0b2b29;--bt-muted:#4b5e5b;--bt-line:#d5e3e0;--bt-edge:#7d948f;--bt-chip:#ccfbf1;color:var(--bt-ink)}
.bt-q,.bt-y{display:none}
.bt:has(input[value=quarterly]:checked) .bt-m,.bt:has(input[value=yearly]:checked) .bt-m{display:none}
.bt:has(input[value=quarterly]:checked) .bt-q,.bt:has(input[value=yearly]:checked) .bt-y{display:revert;animation:bt-in .3s ease-out}
@keyframes bt-in{from{opacity:0;transform:translateY(-4px)}}
.bt-head{max-width:640px;margin:0 auto}
.bt-kicker{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bt-accent)}
.bt-title{margin:10px 0 0;font-size:clamp(1.65rem,4vw,2.3rem);font-weight:800;line-height:1.15;letter-spacing:-.025em;color:var(--bt-ink)}
.bt-sub{margin:12px 0 0;font-size:1rem;line-height:1.55;color:var(--bt-muted)}
.bt-ctl{gap:12px;margin:28px 0 40px}
.bt-save{margin:0;font-size:.88rem;line-height:1.4;color:var(--bt-muted)}
.bt-switch{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px;min-width:0;margin:0;padding:4px;border:1px solid var(--bt-edge);border-radius:999px;background:#fff}
.bt-switch .btn{--bs-btn-padding-x:18px;--bs-btn-padding-y:9px;--bs-btn-font-size:.92rem;--bs-btn-font-weight:700;--bs-btn-line-height:1.3;--bs-btn-border-width:0;--bs-btn-border-radius:999px;
  --bs-btn-color:var(--bt-muted);--bs-btn-hover-color:var(--bt-ink);--bs-btn-hover-bg:transparent;--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--bt-accent);
  display:inline-flex;align-items:center;gap:8px;transition:background-color .2s,color .2s}
.bt-switch .btn-check:focus-visible+.btn{outline:2px solid var(--bt-accent);outline-offset:3px;box-shadow:none}
@media (max-width:639.98px){.bt-switch.three{display:flex;flex-wrap:nowrap;width:100%;border-radius:18px}.bt-switch.three .btn{--bs-btn-padding-x:10px;--bs-btn-padding-y:8px;--bs-btn-border-radius:14px;flex:1;flex-direction:column;justify-content:center;gap:3px}}
.bt-switch .badge{--bs-badge-padding-x:8px;--bs-badge-padding-y:3px;--bs-badge-font-size:.72rem;--bs-badge-font-weight:800;--bs-badge-color:var(--bt-accent-dark);background:var(--bt-chip);line-height:1.2}
.bt-card{--bs-card-spacer-y:30px;--bs-card-spacer-x:28px;--bs-card-border-color:var(--bt-line);--bs-card-border-radius:20px;--bs-card-color:var(--bt-ink)}
@media (min-width:992px){.bt-card .bt-desc{min-height:3em}}
.bt-card.is-rec{--bs-card-border-width:2px;--bs-card-border-color:var(--bt-accent);--bs-card-spacer-y:29px;--bs-card-spacer-x:27px;box-shadow:0 22px 44px -24px rgba(15,118,110,.55)}
.bt-top{gap:8px}
.bt-card h3,.bt-row h3{margin:0;font-size:1.2rem;font-weight:700;line-height:1.3}
.bt-badge{--bs-badge-padding-x:10px;--bs-badge-padding-y:5px;--bs-badge-font-size:.7rem;--bs-badge-font-weight:800;margin:0;background:var(--bt-accent);line-height:1.1;letter-spacing:.08em;text-transform:uppercase}
.bt-desc{margin:8px 0 0;font-size:.92rem;line-height:1.5;color:var(--bt-muted)}
.bt-price{gap:4px 8px;margin:22px 0 0}
.bt-amt{font-size:2.8rem;font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.bt-per{font-size:.9rem;color:var(--bt-muted)}
.bt-note{margin:8px 0 0;min-height:1.4em;font-size:.84rem;line-height:1.4;color:var(--bt-muted)}
.bt-note.bt-y,.bt-note.bt-q{color:var(--bt-accent-dark);font-weight:600}
.bt-btn{--bs-btn-padding-y:12px;--bs-btn-padding-x:18px;--bs-btn-font-size:.95rem;--bs-btn-font-weight:700;--bs-btn-line-height:1.4;--bs-btn-border-width:1.5px;--bs-btn-border-radius:12px;
  --bs-btn-color:var(--bt-accent-dark);--bs-btn-bg:#fff;--bs-btn-border-color:var(--bt-accent);--bs-btn-hover-color:var(--bt-accent-dark);--bs-btn-hover-bg:#e6f4f1;--bs-btn-hover-border-color:var(--bt-accent);
  --bs-btn-active-color:var(--bt-accent-dark);--bs-btn-active-bg:#d3ebe6;--bs-btn-active-border-color:var(--bt-accent);margin-top:22px;transition:background-color .2s,color .2s}
.bt-btn:focus-visible{outline:3px solid var(--bt-accent);outline-offset:3px;box-shadow:none}
.is-rec .bt-btn{--bs-btn-color:#fff;--bs-btn-bg:var(--bt-accent);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--bt-accent-dark);--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--bt-accent-dark)}
.bt-list{display:grid;gap:11px;margin:24px 0 0;padding:22px 0 0;border-top:1px solid var(--bt-line);font-size:.92rem;line-height:1.4}
.bt-list li{display:flex;align-items:flex-start;gap:10px}
.bt-list svg{flex:none;margin-top:1px;color:var(--bt-accent)}
.bt-bar{gap:20px 32px;margin:0 0 28px}
.bt-bar .bt-title{margin-top:6px;font-size:clamp(1.5rem,3.4vw,1.9rem)}
.bt-bar .bt-sub{margin-top:8px;font-size:.92rem}
.bt-row{--bs-card-spacer-y:26px;--bs-card-spacer-x:28px;--bs-card-border-color:var(--bt-line);--bs-card-border-radius:20px;--bs-card-color:var(--bt-ink)}
.bt-row .row{--bs-gutter-x:32px;--bs-gutter-y:20px}
@media (min-width:768px){.bt-row .bt-side{width:292px}}
.bt-row .bt-list{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;padding:0;border:0}
.bt-row .bt-price{margin:0}
.bt-row .bt-btn{margin-top:16px}
@media (prefers-reduced-motion:reduce){.bt-switch .btn,.bt-btn{transition:none}.bt:has(input:checked) .bt-q,.bt:has(input:checked) .bt-y{animation:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4b5e5b] uppercase">Monthly or yearly, three plans</span>
<section class="group/bt text-[#0b2b29]" aria-labelledby="tm-title">
  <header class="mx-auto max-w-[640px] text-center"><p class="text-[.78rem] font-bold tracking-[.14em] text-[#0f766e] uppercase">Trailmark pricing</p><h2 class="mt-2.5 text-[clamp(1.65rem,4vw,2.3rem)] leading-[1.15] font-extrabold tracking-[-.025em]" id="tm-title">Plan every project in one place</h2><p class="mt-3 text-base leading-[1.55] text-[#4b5e5b]">Prices are per workspace, in US dollars. Every plan starts with a 14-day free trial.</p></header>
  <div class="mt-7 mb-10 flex flex-col items-center gap-3">
  <fieldset class="inline-flex min-w-0 flex-wrap justify-center gap-1 rounded-full border border-[#7d948f] bg-white p-1"><legend class="sr-only">Billing period</legend>
    <label class="relative cursor-pointer"><input class="peer sr-only" type="radio" name="tm-billing" value="monthly" checked><span class="inline-flex items-center gap-2 rounded-full px-[18px] py-[9px] text-[.92rem] leading-[1.3] font-bold text-[#4b5e5b] transition-[color,background-color,border-color] duration-200 hover:text-[#0b2b29] peer-checked:bg-[#0f766e] peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-[#0f766e] motion-reduce:transition-none">Monthly</span></label>
    <label class="relative cursor-pointer"><input class="peer sr-only" type="radio" name="tm-billing" value="yearly"><span class="inline-flex items-center gap-2 rounded-full px-[18px] py-[9px] text-[.92rem] leading-[1.3] font-bold text-[#4b5e5b] transition-[color,background-color,border-color] duration-200 hover:text-[#0b2b29] peer-checked:bg-[#0f766e] peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-[#0f766e] motion-reduce:transition-none">Yearly <em class="rounded-full bg-[#ccfbf1] px-2 py-[3px] text-[.72rem] leading-[1.2] font-extrabold text-[#115e59] not-italic">Save 20%</em></span></label>
  </fieldset>
  <p class="text-[.88rem] leading-[1.4] text-[#4b5e5b]">Yearly billing costs 20% less on every plan.</p>
  </div>
  <div class="grid grid-cols-1 gap-6 min-[992px]:grid-cols-3">
    <article class="flex flex-col rounded-[20px] bg-white border border-[#d5e3e0] px-7 py-[30px]" aria-labelledby="tm-basic">
      <div class="flex flex-wrap items-center justify-between gap-2"><h3 class="text-[1.2rem] leading-[1.3] font-bold" id="tm-basic">Basic</h3></div>
      <p class="mt-2 text-[.92rem] leading-normal text-[#4b5e5b] min-[992px]:min-h-[3em]">For one project and a small crew.</p>
      <p class="mt-[22px] flex flex-wrap items-baseline gap-x-2 gap-y-1"><span class="text-[2.8rem] leading-none font-extrabold tracking-[-.04em] tabular-nums group-has-[[value=quarterly]:checked]/bt:hidden group-has-[[value=yearly]:checked]/bt:hidden">$10</span><span class="text-[2.8rem] leading-none font-extrabold tracking-[-.04em] tabular-nums hidden group-has-[[value=yearly]:checked]/bt:inline group-has-[[value=yearly]:checked]/bt:animate-bt-in motion-reduce:animate-none">$8</span><span class="text-[.9rem] text-[#4b5e5b]">per month</span></p>
      <p class="mt-2 min-h-[1.4em] text-[.84rem] leading-[1.4] text-[#4b5e5b] group-has-[[value=quarterly]:checked]/bt:hidden group-has-[[value=yearly]:checked]/bt:hidden">Billed monthly. Cancel any time.</p><p class="mt-2 min-h-[1.4em] text-[.84rem] leading-[1.4] font-semibold text-[#115e59] hidden group-has-[[value=yearly]:checked]/bt:block group-has-[[value=yearly]:checked]/bt:animate-bt-in motion-reduce:animate-none">Billed $96 a year. You save $24.</p>
      <a class="mt-[22px] block rounded-xl border-[1.5px] border-[#0f766e] px-[18px] py-3 text-center text-[.95rem] leading-[1.4] font-bold no-underline transition-[color,background-color,border-color] duration-200 motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f766e] bg-white text-[#115e59] hover:bg-[#e6f4f1]" href="#">Choose Basic</a>
      <ul class="mt-6 grid gap-[11px] border-t border-[#d5e3e0] pt-[22px] text-[.92rem] leading-[1.4]">
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#0f766e]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>3 projects</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#0f766e]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>5 members</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#0f766e]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Board and list views</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#0f766e]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>2 GB of file storage</span></li>
      </ul>
    </article>
    <article class="flex flex-col rounded-[20px] bg-white border-2 border-[#0f766e] px-[27px] py-[29px] shadow-[0_22px_44px_-24px_rgba(15,118,110,.55)]" aria-labelledby="tm-team">
      <div class="flex flex-wrap items-center justify-between gap-2"><h3 class="text-[1.2rem] leading-[1.3] font-bold" id="tm-team">Team</h3><p class="rounded-full bg-[#0f766e] px-2.5 py-[5px] text-[.7rem] leading-[1.1] font-extrabold tracking-[.08em] text-white uppercase">Recommended</p></div>
      <p class="mt-2 text-[.92rem] leading-normal text-[#4b5e5b] min-[992px]:min-h-[3em]">For teams running several projects at once.</p>
      <p class="mt-[22px] flex flex-wrap items-baseline gap-x-2 gap-y-1"><span class="text-[2.8rem] leading-none font-extrabold tracking-[-.04em] tabular-nums group-has-[[value=quarterly]:checked]/bt:hidden group-has-[[value=yearly]:checked]/bt:hidden">$25</span><span class="text-[2.8rem] leading-none font-extrabold tracking-[-.04em] tabular-nums hidden group-has-[[value=yearly]:checked]/bt:inline group-has-[[value=yearly]:checked]/bt:animate-bt-in motion-reduce:animate-none">$20</span><span class="text-[.9rem] text-[#4b5e5b]">per month</span></p>
      <p class="mt-2 min-h-[1.4em] text-[.84rem] leading-[1.4] text-[#4b5e5b] group-has-[[value=quarterly]:checked]/bt:hidden group-has-[[value=yearly]:checked]/bt:hidden">Billed monthly. Cancel any time.</p><p class="mt-2 min-h-[1.4em] text-[.84rem] leading-[1.4] font-semibold text-[#115e59] hidden group-has-[[value=yearly]:checked]/bt:block group-has-[[value=yearly]:checked]/bt:animate-bt-in motion-reduce:animate-none">Billed $240 a year. You save $60.</p>
      <a class="mt-[22px] block rounded-xl border-[1.5px] border-[#0f766e] px-[18px] py-3 text-center text-[.95rem] leading-[1.4] font-bold no-underline transition-[color,background-color,border-color] duration-200 motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f766e] bg-[#0f766e] text-white hover:bg-[#115e59]" href="#">Choose Team</a>
      <ul class="mt-6 grid gap-[11px] border-t border-[#d5e3e0] pt-[22px] text-[.92rem] leading-[1.4]">
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#0f766e]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Unlimited projects</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#0f766e]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>25 members</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#0f766e]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Timeline and workload views</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#0f766e]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>50 GB of file storage</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#0f766e]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Guest access for clients</span></li>
      </ul>
    </article>
    <article class="flex flex-col rounded-[20px] bg-white border border-[#d5e3e0] px-7 py-[30px]" aria-labelledby="tm-business">
      <div class="flex flex-wrap items-center justify-between gap-2"><h3 class="text-[1.2rem] leading-[1.3] font-bold" id="tm-business">Business</h3></div>
      <p class="mt-2 text-[.92rem] leading-normal text-[#4b5e5b] min-[992px]:min-h-[3em]">For departments that report across projects.</p>
      <p class="mt-[22px] flex flex-wrap items-baseline gap-x-2 gap-y-1"><span class="text-[2.8rem] leading-none font-extrabold tracking-[-.04em] tabular-nums group-has-[[value=quarterly]:checked]/bt:hidden group-has-[[value=yearly]:checked]/bt:hidden">$60</span><span class="text-[2.8rem] leading-none font-extrabold tracking-[-.04em] tabular-nums hidden group-has-[[value=yearly]:checked]/bt:inline group-has-[[value=yearly]:checked]/bt:animate-bt-in motion-reduce:animate-none">$48</span><span class="text-[.9rem] text-[#4b5e5b]">per month</span></p>
      <p class="mt-2 min-h-[1.4em] text-[.84rem] leading-[1.4] text-[#4b5e5b] group-has-[[value=quarterly]:checked]/bt:hidden group-has-[[value=yearly]:checked]/bt:hidden">Billed monthly. Cancel any time.</p><p class="mt-2 min-h-[1.4em] text-[.84rem] leading-[1.4] font-semibold text-[#115e59] hidden group-has-[[value=yearly]:checked]/bt:block group-has-[[value=yearly]:checked]/bt:animate-bt-in motion-reduce:animate-none">Billed $576 a year. You save $144.</p>
      <a class="mt-[22px] block rounded-xl border-[1.5px] border-[#0f766e] px-[18px] py-3 text-center text-[.95rem] leading-[1.4] font-bold no-underline transition-[color,background-color,border-color] duration-200 motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f766e] bg-white text-[#115e59] hover:bg-[#e6f4f1]" href="#">Choose Business</a>
      <ul class="mt-6 grid gap-[11px] border-t border-[#d5e3e0] pt-[22px] text-[.92rem] leading-[1.4]">
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#0f766e]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Unlimited projects</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#0f766e]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Unlimited members</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#0f766e]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Portfolio reporting</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#0f766e]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>500 GB of file storage</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#0f766e]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>SAML single sign-on</span></li>
      </ul>
    </article>
  </div>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4b5e5b] uppercase">Three billing periods, wide rows</span>
<section class="group/bt text-[#0b2b29]" aria-labelledby="hs-title">
  <header class="mb-7 flex flex-wrap items-end justify-between gap-x-8 gap-y-5"><div><p class="text-[.78rem] font-bold tracking-[.14em] text-[#0f766e] uppercase">Harbor Static</p><h2 class="mt-1.5 text-[clamp(1.5rem,3.4vw,1.9rem)] leading-[1.15] font-extrabold tracking-[-.025em]" id="hs-title">Hosting for static sites</h2><p class="mt-2 text-[.92rem] leading-[1.55] text-[#4b5e5b]">Pay monthly, or save 10% quarterly and 20% yearly.</p></div>
  <fieldset class="inline-flex min-w-0 flex-wrap justify-center gap-1 rounded-full border border-[#7d948f] bg-white p-1 max-sm:flex max-sm:w-full max-sm:flex-nowrap max-sm:rounded-[18px]"><legend class="sr-only">Billing period</legend>
    <label class="relative cursor-pointer max-sm:flex-1"><input class="peer sr-only" type="radio" name="hs-billing" value="monthly" checked><span class="inline-flex items-center gap-2 rounded-full px-[18px] py-[9px] text-[.92rem] leading-[1.3] font-bold text-[#4b5e5b] transition-[color,background-color,border-color] duration-200 hover:text-[#0b2b29] peer-checked:bg-[#0f766e] peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-[#0f766e] motion-reduce:transition-none max-sm:flex max-sm:h-full max-sm:flex-col max-sm:justify-center max-sm:gap-[3px] max-sm:rounded-[14px] max-sm:px-2.5 max-sm:py-2">Monthly</span></label>
    <label class="relative cursor-pointer max-sm:flex-1"><input class="peer sr-only" type="radio" name="hs-billing" value="quarterly"><span class="inline-flex items-center gap-2 rounded-full px-[18px] py-[9px] text-[.92rem] leading-[1.3] font-bold text-[#4b5e5b] transition-[color,background-color,border-color] duration-200 hover:text-[#0b2b29] peer-checked:bg-[#0f766e] peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-[#0f766e] motion-reduce:transition-none max-sm:flex max-sm:h-full max-sm:flex-col max-sm:justify-center max-sm:gap-[3px] max-sm:rounded-[14px] max-sm:px-2.5 max-sm:py-2">Quarterly <em class="rounded-full bg-[#ccfbf1] px-2 py-[3px] text-[.72rem] leading-[1.2] font-extrabold text-[#115e59] not-italic">Save 10%</em></span></label>
    <label class="relative cursor-pointer max-sm:flex-1"><input class="peer sr-only" type="radio" name="hs-billing" value="yearly"><span class="inline-flex items-center gap-2 rounded-full px-[18px] py-[9px] text-[.92rem] leading-[1.3] font-bold text-[#4b5e5b] transition-[color,background-color,border-color] duration-200 hover:text-[#0b2b29] peer-checked:bg-[#0f766e] peer-checked:text-white peer-focus-visible:outline-2 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-[#0f766e] motion-reduce:transition-none max-sm:flex max-sm:h-full max-sm:flex-col max-sm:justify-center max-sm:gap-[3px] max-sm:rounded-[14px] max-sm:px-2.5 max-sm:py-2">Yearly <em class="rounded-full bg-[#ccfbf1] px-2 py-[3px] text-[.72rem] leading-[1.2] font-extrabold text-[#115e59] not-italic">Save 20%</em></span></label>
  </fieldset>
  </header>
  <div class="grid gap-4">
    <article class="grid grid-cols-1 gap-x-8 gap-y-5 rounded-[20px] border border-[#d5e3e0] bg-white px-7 py-[26px] md:grid-cols-[1fr_260px] md:items-center" aria-labelledby="hs-starter">
      <div>
        <h3 class="text-[1.2rem] leading-[1.3] font-bold" id="hs-starter">Starter</h3>
        <p class="mt-2 text-[.92rem] leading-normal text-[#4b5e5b]">For personal sites, portfolios and docs.</p>
        <ul class="mt-4 flex flex-wrap gap-x-[22px] gap-y-2 text-[.92rem] leading-[1.4]">
          <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#0f766e]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>3 sites</span></li>
          <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#0f766e]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>100 GB bandwidth a month</span></li>
          <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#0f766e]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Custom domains with HTTPS</span></li>
        </ul>
      </div>
      <div>
        <p class="flex flex-wrap items-baseline gap-x-2 gap-y-1"><span class="text-[2.8rem] leading-none font-extrabold tracking-[-.04em] tabular-nums group-has-[[value=quarterly]:checked]/bt:hidden group-has-[[value=yearly]:checked]/bt:hidden">$15</span><span class="text-[2.8rem] leading-none font-extrabold tracking-[-.04em] tabular-nums hidden group-has-[[value=quarterly]:checked]/bt:inline group-has-[[value=quarterly]:checked]/bt:animate-bt-in motion-reduce:animate-none">$13.50</span><span class="text-[2.8rem] leading-none font-extrabold tracking-[-.04em] tabular-nums hidden group-has-[[value=yearly]:checked]/bt:inline group-has-[[value=yearly]:checked]/bt:animate-bt-in motion-reduce:animate-none">$12</span><span class="text-[.9rem] text-[#4b5e5b]">per month</span></p>
        <p class="mt-2 min-h-[1.4em] text-[.84rem] leading-[1.4] text-[#4b5e5b] group-has-[[value=quarterly]:checked]/bt:hidden group-has-[[value=yearly]:checked]/bt:hidden">Billed $15 every month.</p><p class="mt-2 min-h-[1.4em] text-[.84rem] leading-[1.4] font-semibold text-[#115e59] hidden group-has-[[value=quarterly]:checked]/bt:block group-has-[[value=quarterly]:checked]/bt:animate-bt-in motion-reduce:animate-none">Billed $40.50 every 3 months. You save $4.50.</p><p class="mt-2 min-h-[1.4em] text-[.84rem] leading-[1.4] font-semibold text-[#115e59] hidden group-has-[[value=yearly]:checked]/bt:block group-has-[[value=yearly]:checked]/bt:animate-bt-in motion-reduce:animate-none">Billed $144 a year. You save $36.</p>
        <a class="mt-4 block rounded-xl border-[1.5px] border-[#0f766e] px-[18px] py-3 text-center text-[.95rem] leading-[1.4] font-bold no-underline transition-[color,background-color,border-color] duration-200 motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f766e] bg-white text-[#115e59] hover:bg-[#e6f4f1]" href="#">Start on Starter</a>
      </div>
    </article>
    <article class="grid grid-cols-1 gap-x-8 gap-y-5 rounded-[20px] border border-[#d5e3e0] bg-white px-7 py-[26px] md:grid-cols-[1fr_260px] md:items-center" aria-labelledby="hs-agency">
      <div>
        <h3 class="text-[1.2rem] leading-[1.3] font-bold" id="hs-agency">Agency</h3>
        <p class="mt-2 text-[.92rem] leading-normal text-[#4b5e5b]">For studios hosting client sites.</p>
        <ul class="mt-4 flex flex-wrap gap-x-[22px] gap-y-2 text-[.92rem] leading-[1.4]">
          <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#0f766e]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>25 sites</span></li>
          <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#0f766e]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>1 TB bandwidth a month</span></li>
          <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#0f766e]" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span><span class="sr-only">Included: </span>Preview deploys and password protection</span></li>
        </ul>
      </div>
      <div>
        <p class="flex flex-wrap items-baseline gap-x-2 gap-y-1"><span class="text-[2.8rem] leading-none font-extrabold tracking-[-.04em] tabular-nums group-has-[[value=quarterly]:checked]/bt:hidden group-has-[[value=yearly]:checked]/bt:hidden">$40</span><span class="text-[2.8rem] leading-none font-extrabold tracking-[-.04em] tabular-nums hidden group-has-[[value=quarterly]:checked]/bt:inline group-has-[[value=quarterly]:checked]/bt:animate-bt-in motion-reduce:animate-none">$36</span><span class="text-[2.8rem] leading-none font-extrabold tracking-[-.04em] tabular-nums hidden group-has-[[value=yearly]:checked]/bt:inline group-has-[[value=yearly]:checked]/bt:animate-bt-in motion-reduce:animate-none">$32</span><span class="text-[.9rem] text-[#4b5e5b]">per month</span></p>
        <p class="mt-2 min-h-[1.4em] text-[.84rem] leading-[1.4] text-[#4b5e5b] group-has-[[value=quarterly]:checked]/bt:hidden group-has-[[value=yearly]:checked]/bt:hidden">Billed $40 every month.</p><p class="mt-2 min-h-[1.4em] text-[.84rem] leading-[1.4] font-semibold text-[#115e59] hidden group-has-[[value=quarterly]:checked]/bt:block group-has-[[value=quarterly]:checked]/bt:animate-bt-in motion-reduce:animate-none">Billed $108 every 3 months. You save $12.</p><p class="mt-2 min-h-[1.4em] text-[.84rem] leading-[1.4] font-semibold text-[#115e59] hidden group-has-[[value=yearly]:checked]/bt:block group-has-[[value=yearly]:checked]/bt:animate-bt-in motion-reduce:animate-none">Billed $384 a year. You save $96.</p>
        <a class="mt-4 block rounded-xl border-[1.5px] border-[#0f766e] px-[18px] py-3 text-center text-[.95rem] leading-[1.4] font-bold no-underline transition-[color,background-color,border-color] duration-200 motion-reduce:transition-none focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f766e] bg-white text-[#115e59] hover:bg-[#e6f4f1]" href="#">Start on Agency</a>
      </div>
    </article>
  </div>
</section></div>
CSS 
@theme {
  --animate-bt-in: bt-in .3s ease-out;
  @keyframes bt-in { from { opacity: 0; transform: translateY(-4px); } }
}

About this set

Pricing tables with a billing period switch that changes every price on the page without any JavaScript. Monthly or yearly, three plans is a project management tool with Basic, Team and Business cards and a two-option segmented control above them; choosing Yearly swaps each price to its discounted monthly rate and replaces the note under it with what is billed and what you save, such as Billed $240 a year. You save $60. A line under the switch states the saving in words, so it never depends on the Save 20% chip alone. Three billing periods, wide rows is a static hosting service with Monthly, Quarterly and Yearly options and two plans laid out as wide rows, with the features on the left and the price block on the right; on phones the switch becomes three equal columns with the saving under each label. The switch is a fieldset of radio buttons with a visually hidden legend, and the prices change through the :has() selector: the card container checks which radio is selected and shows the matching price and note. In Bootstrap the options are .btn-check buttons.

What’s included

  • Monthly and yearly, or monthly, quarterly and yearly billing switches
  • Prices and billing notes switch with :has(), no JavaScript
  • The saving is stated in text under the switch and under every price
  • A real radio group in a fieldset, so arrow keys move between periods
  • Bootstrap version uses .btn-check, .badge, .card and .btn

Accessibility

The billing switch is a fieldset of native radio buttons with a Billing period legend, so screen readers announce the group and the selected option and the arrow keys change it. Hidden prices use display: none, so only the price on screen is read. The focused option gets a 2px outline on the visible pill, and the price fade-in animation and colour transitions stop under prefers-reduced-motion.

Customise it

Change --bt-accent, --bt-chip and --bt-radius on .bt for colour and shape, and edit the .bt-m, .bt-q and .bt-y spans for your own prices. In Tailwind the switch is driven by group-has-[[value=yearly]:checked]/bt variants on each price.