Highlighted Plan Pricing Cards in CSS, Bootstrap & Tailwind

Open demo

CSS code

HTML

<div><span class="lbl">Three tiers, highlighted middle plan</span>
<section class="pt" aria-labelledby="ld-title">
  <header class="pt-head"><p class="pt-kicker">Ledgerleaf pricing</p><h2 class="pt-title" id="ld-title">Bookkeeping that keeps up with you</h2><p class="pt-sub">Every plan includes bank sync, receipt capture and a 30-day free trial. Prices in US dollars.</p></header>
  <div class="pt-grid">
    <article class="pt-card" aria-labelledby="ld-solo">
      <h3 id="ld-solo">Solo</h3>
      <p class="pt-desc">For freelancers sending a handful of invoices a month.</p>
      <p class="pt-price"><span class="pt-amt">$9</span><span class="pt-per">per month</span></p>
      <p class="pt-note">Billed monthly. Cancel any time.</p>
      <a class="pt-btn" href="#">Start with Solo</a>
      <ul class="pt-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>1 user</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>20 invoices 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>2 connected bank accounts</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>Receipt capture</span></li>
        <li class="no"><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l8 8M14 6l-8 8"/></svg><span><span class="sr-only">Not included: </span>Payroll</span></li>
        <li class="no"><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l8 8M14 6l-8 8"/></svg><span><span class="sr-only">Not included: </span>Multi-currency invoices</span></li>
      </ul>
    </article>
    <article class="pt-card is-rec" aria-labelledby="ld-studio">
      <p class="pt-badge">Recommended</p>
      <h3 id="ld-studio">Studio</h3>
      <p class="pt-desc">For small teams that bill clients and pay contractors.</p>
      <p class="pt-price"><span class="pt-amt">$24</span><span class="pt-per">per month</span></p>
      <p class="pt-note">Billed monthly. Cancel any time.</p>
      <a class="pt-btn" href="#">Start with Studio</a>
      <ul class="pt-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>Up to 5 users</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 invoices</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>10 connected bank accounts</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>Receipt capture</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>Payroll for up to 10 people</span></li>
        <li class="no"><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l8 8M14 6l-8 8"/></svg><span><span class="sr-only">Not included: </span>Multi-currency invoices</span></li>
      </ul>
    </article>
    <article class="pt-card" aria-labelledby="ld-firm">
      <h3 id="ld-firm">Firm</h3>
      <p class="pt-desc">For accountants keeping the books for several companies.</p>
      <p class="pt-price"><span class="pt-amt">$59</span><span class="pt-per">per month</span></p>
      <p class="pt-note">Billed monthly. Cancel any time.</p>
      <a class="pt-btn" href="#">Start with Firm</a>
      <ul class="pt-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 users</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 invoices</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 bank accounts</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>Receipt capture</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>Payroll for up to 100 people</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>Multi-currency invoices</span></li>
      </ul>
    </article>
  </div>
</section></div>

<div><span class="lbl">Four tiers with a free plan</span>
<section class="pt" aria-labelledby="pg-title">
  <header class="pt-bar"><div><p class="pt-kicker">Pinegrove Notes</p><h2 class="pt-title" id="pg-title">Pick a plan for your notes</h2></div><p class="pt-sub">Prices in US dollars. Switch or cancel at any time.</p></header>
  <div class="pt-grid four">
    <article class="pt-card sm" aria-labelledby="pg-free">
      <div class="pt-top"><h3 id="pg-free">Free</h3></div>
      <p class="pt-desc">Personal notes on one device.</p>
      <p class="pt-price"><span class="pt-amt">$0</span><span class="pt-per">forever</span></p>
      <a class="pt-btn" href="#">Get Free</a>
      <p class="pt-lead">Includes:</p>
      <ul class="pt-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>1 device</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 MB of 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>Markdown export</span></li>
      </ul>
    </article>
    <article class="pt-card sm" aria-labelledby="pg-plus">
      <div class="pt-top"><h3 id="pg-plus">Plus</h3></div>
      <p class="pt-desc">Your notes on phone and laptop.</p>
      <p class="pt-price"><span class="pt-amt">$4</span><span class="pt-per">per month</span></p>
      <a class="pt-btn" href="#">Get Plus</a>
      <p class="pt-lead">Everything in Free, and:</p>
      <ul class="pt-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 devices</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>10 GB of 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>Offline notebooks</span></li>
      </ul>
    </article>
    <article class="pt-card sm is-pick" aria-labelledby="pg-pro">
      <div class="pt-top"><h3 id="pg-pro">Pro</h3><p class="pt-tag">Recommended</p></div>
      <p class="pt-desc">For writers and researchers.</p>
      <p class="pt-price"><span class="pt-amt">$8</span><span class="pt-per">per month</span></p>
      <a class="pt-btn" href="#">Get Pro</a>
      <p class="pt-lead">Everything in Plus, and:</p>
      <ul class="pt-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 devices</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 of 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>1 year of version history</span></li>
      </ul>
    </article>
    <article class="pt-card sm" aria-labelledby="pg-teams">
      <div class="pt-top"><h3 id="pg-teams">Teams</h3></div>
      <p class="pt-desc">Shared notebooks for a team.</p>
      <p class="pt-price"><span class="pt-amt">$6</span><span class="pt-per">per user / month</span></p>
      <a class="pt-btn" href="#">Get Teams</a>
      <p class="pt-lead">Everything in Pro, and:</p>
      <ul class="pt-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>Shared spaces</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>Admin console</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>Single sign-on</span></li>
      </ul>
    </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}
/* Pricing cards with one highlighted plan. Icons are aria-hidden; visually hidden text says Included / Not included. */
.pt{--pt-accent:#4338ca;--pt-accent-dark:#3730a3;--pt-ink:#1e1b4b;--pt-muted:#5b6478;--pt-line:#e2e8f0;--pt-card:#fff;--pt-radius:18px;--pt-badge:#fbbf24;color:#1e293b}
.pt *,.pt *::before,.pt *::after{box-sizing:border-box}
.pt-head{max-width:680px;margin:0 auto 44px;text-align:center}
.pt-kicker{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pt-accent)}
.pt-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(--pt-ink)}
.pt-sub{margin:12px 0 0;font-size:1rem;line-height:1.55;color:var(--pt-muted)}
.pt-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:992px){.pt-grid{grid-template-columns:repeat(3,1fr)}}
.pt-card{position:relative;display:flex;flex-direction:column;padding:32px 28px;background:var(--pt-card);border:1px solid var(--pt-line);border-radius:var(--pt-radius);box-shadow:0 1px 2px rgba(15,23,42,.05)}
.pt-card h3{margin:0;font-size:1.15rem;font-weight:700;line-height:1.3;color:var(--pt-ink)}
.pt-desc{margin:8px 0 0;font-size:.92rem;line-height:1.5;color:var(--pt-muted)}
.pt-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:22px 0 0;color:var(--pt-ink)}
.pt-amt{font-size:2.9rem;font-weight:800;line-height:1;letter-spacing:-.04em}
.pt-per{font-size:.9rem;color:var(--pt-muted)}
.pt-note{margin:8px 0 0;font-size:.82rem;line-height:1.4;color:var(--pt-muted)}
.pt-btn{display:block;margin:24px 0 0;padding:12px 18px;border:1.5px solid var(--pt-accent);border-radius:999px;background:transparent;color:var(--pt-accent);font-size:.95rem;font-weight:700;line-height:1.4;text-align:center;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
.pt-btn:hover{background:#eef2ff}
.pt-btn:focus-visible{outline:3px solid var(--pt-accent);outline-offset:3px}
.pt-list{display:grid;gap:12px;margin:26px 0 0;padding:24px 0 0;border-top:1px solid var(--pt-line);list-style:none;font-size:.92rem;line-height:1.4}
.pt-list li{display:flex;align-items:flex-start;gap:10px}
.pt-list svg{flex:none;margin-top:1px;color:var(--pt-accent)}
.pt-list .no{color:var(--pt-muted)}
.pt-list .no svg{color:var(--pt-muted)}
/* the highlighted plan */
.pt-card.is-rec{background:var(--pt-ink);border-color:var(--pt-ink);color:#fff;box-shadow:0 24px 48px -18px rgba(30,27,75,.55)}
.pt-card.is-rec h3,.pt-card.is-rec .pt-price{color:#fff}
.pt-card.is-rec .pt-desc,.pt-card.is-rec .pt-per,.pt-card.is-rec .pt-note,.pt-card.is-rec .pt-list .no{color:#c7d2fe}
.pt-card.is-rec .pt-list{border-color:rgba(255,255,255,.18)}
.pt-card.is-rec .pt-list svg{color:#a5b4fc}
.pt-card.is-rec .pt-btn{background:#fff;border-color:#fff;color:var(--pt-ink)}
.pt-card.is-rec .pt-btn:hover{background:#e0e7ff;border-color:#e0e7ff}
.pt-card.is-rec .pt-btn:focus-visible{outline-color:#fff}
.pt-badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);margin:0;padding:7px 14px;border-radius:999px;background:var(--pt-badge);color:var(--pt-ink);font-size:.72rem;font-weight:800;line-height:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
/* four-tier variant */
.pt-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px;margin:0 0 28px}
.pt-bar .pt-title{margin-top:6px;font-size:clamp(1.5rem,3.4vw,1.9rem)}
.pt-bar .pt-sub{margin:0;font-size:.92rem}
.pt-grid.four{gap:20px}
@media (min-width:576px){.pt-grid.four{grid-template-columns:repeat(2,1fr)}}
@media (min-width:992px){.pt-grid.four{grid-template-columns:repeat(4,1fr)}}
.pt-card.sm{padding:26px 22px}
.pt-card.sm .pt-amt{font-size:2.3rem}
@media (min-width:576px){.pt-card.sm .pt-desc{min-height:3em}}
.pt-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}
.pt-tag{margin:0;padding:5px 10px;border-radius:999px;background:#e0e7ff;color:var(--pt-accent-dark);font-size:.7rem;font-weight:800;line-height:1;letter-spacing:.08em;text-transform:uppercase}
.pt-lead{margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--pt-line);font-size:.82rem;font-weight:700;color:var(--pt-ink)}
.pt-card.sm .pt-list{margin-top:12px;padding-top:0;border-top:0;gap:10px}
.pt-card.is-pick{padding:25px 21px;border:2px solid var(--pt-accent);background:#f8f8ff;box-shadow:0 18px 36px -20px rgba(67,56,202,.5)}
.pt-card.is-pick .pt-btn{background:var(--pt-accent);color:#fff}
.pt-card.is-pick .pt-btn:hover{background:var(--pt-accent-dark);border-color:var(--pt-accent-dark)}
@media (prefers-reduced-motion:reduce){.pt-btn{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML

<div><span class="lbl">Three tiers, highlighted middle plan</span>
<section class="pt" aria-labelledby="ld-title">
  <header class="pt-head text-center"><p class="pt-kicker">Ledgerleaf pricing</p><h2 class="pt-title" id="ld-title">Bookkeeping that keeps up with you</h2><p class="pt-sub">Every plan includes bank sync, receipt capture and a 30-day free trial. Prices in US dollars.</p></header>
  <div class="row row-cols-1 row-cols-lg-3 g-4">
    <div class="col"><article class="card pt-card h-100" aria-labelledby="ld-solo"><div class="card-body d-flex flex-column">
        <h3 id="ld-solo">Solo</h3>
        <p class="pt-desc">For freelancers sending a handful of invoices a month.</p>
        <p class="pt-price d-flex flex-wrap align-items-baseline"><span class="pt-amt">$9</span><span class="pt-per">per month</span></p>
        <p class="pt-note">Billed monthly. Cancel any time.</p>
        <a class="btn pt-btn d-block w-100" href="#">Start with Solo</a>
        <ul class="pt-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>1 user</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>20 invoices 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>2 connected bank accounts</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>Receipt capture</span></li>
          <li class="no"><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l8 8M14 6l-8 8"/></svg><span><span class="visually-hidden">Not included: </span>Payroll</span></li>
          <li class="no"><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l8 8M14 6l-8 8"/></svg><span><span class="visually-hidden">Not included: </span>Multi-currency invoices</span></li>
        </ul>
      </div></article></div>
    <div class="col"><article class="card pt-card h-100 is-rec" aria-labelledby="ld-studio"><div class="card-body d-flex flex-column">
        <p class="badge rounded-pill pt-badge">Recommended</p>
        <h3 id="ld-studio">Studio</h3>
        <p class="pt-desc">For small teams that bill clients and pay contractors.</p>
        <p class="pt-price d-flex flex-wrap align-items-baseline"><span class="pt-amt">$24</span><span class="pt-per">per month</span></p>
        <p class="pt-note">Billed monthly. Cancel any time.</p>
        <a class="btn pt-btn d-block w-100" href="#">Start with Studio</a>
        <ul class="pt-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>Up to 5 users</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 invoices</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>10 connected bank accounts</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>Receipt capture</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>Payroll for up to 10 people</span></li>
          <li class="no"><svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l8 8M14 6l-8 8"/></svg><span><span class="visually-hidden">Not included: </span>Multi-currency invoices</span></li>
        </ul>
      </div></article></div>
    <div class="col"><article class="card pt-card h-100" aria-labelledby="ld-firm"><div class="card-body d-flex flex-column">
        <h3 id="ld-firm">Firm</h3>
        <p class="pt-desc">For accountants keeping the books for several companies.</p>
        <p class="pt-price d-flex flex-wrap align-items-baseline"><span class="pt-amt">$59</span><span class="pt-per">per month</span></p>
        <p class="pt-note">Billed monthly. Cancel any time.</p>
        <a class="btn pt-btn d-block w-100" href="#">Start with Firm</a>
        <ul class="pt-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 users</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 invoices</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 bank accounts</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>Receipt capture</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>Payroll for up to 100 people</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>Multi-currency invoices</span></li>
        </ul>
      </div></article></div>
  </div>
</section></div>

<div><span class="lbl">Four tiers with a free plan</span>
<section class="pt" aria-labelledby="pg-title">
  <header class="pt-bar d-flex flex-wrap align-items-end justify-content-between"><div><p class="pt-kicker">Pinegrove Notes</p><h2 class="pt-title" id="pg-title">Pick a plan for your notes</h2></div><p class="pt-sub">Prices in US dollars. Switch or cancel at any time.</p></header>
  <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 pt-four">
    <div class="col"><article class="card pt-card sm h-100" aria-labelledby="pg-free"><div class="card-body d-flex flex-column">
        <div class="pt-top d-flex flex-wrap align-items-center justify-content-between"><h3 id="pg-free">Free</h3></div>
        <p class="pt-desc">Personal notes on one device.</p>
        <p class="pt-price d-flex flex-wrap align-items-baseline"><span class="pt-amt">$0</span><span class="pt-per">forever</span></p>
        <a class="btn pt-btn d-block w-100" href="#">Get Free</a>
        <p class="pt-lead">Includes:</p>
        <ul class="pt-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>1 device</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 MB of 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>Markdown export</span></li>
        </ul>
      </div></article></div>
    <div class="col"><article class="card pt-card sm h-100" aria-labelledby="pg-plus"><div class="card-body d-flex flex-column">
        <div class="pt-top d-flex flex-wrap align-items-center justify-content-between"><h3 id="pg-plus">Plus</h3></div>
        <p class="pt-desc">Your notes on phone and laptop.</p>
        <p class="pt-price d-flex flex-wrap align-items-baseline"><span class="pt-amt">$4</span><span class="pt-per">per month</span></p>
        <a class="btn pt-btn d-block w-100" href="#">Get Plus</a>
        <p class="pt-lead">Everything in Free, and:</p>
        <ul class="pt-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 devices</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>10 GB of 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>Offline notebooks</span></li>
        </ul>
      </div></article></div>
    <div class="col"><article class="card pt-card sm h-100 is-pick" aria-labelledby="pg-pro"><div class="card-body d-flex flex-column">
        <div class="pt-top d-flex flex-wrap align-items-center justify-content-between"><h3 id="pg-pro">Pro</h3><p class="badge rounded-pill pt-tag">Recommended</p></div>
        <p class="pt-desc">For writers and researchers.</p>
        <p class="pt-price d-flex flex-wrap align-items-baseline"><span class="pt-amt">$8</span><span class="pt-per">per month</span></p>
        <a class="btn pt-btn d-block w-100" href="#">Get Pro</a>
        <p class="pt-lead">Everything in Plus, and:</p>
        <ul class="pt-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 devices</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 of 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>1 year of version history</span></li>
        </ul>
      </div></article></div>
    <div class="col"><article class="card pt-card sm h-100" aria-labelledby="pg-teams"><div class="card-body d-flex flex-column">
        <div class="pt-top d-flex flex-wrap align-items-center justify-content-between"><h3 id="pg-teams">Teams</h3></div>
        <p class="pt-desc">Shared notebooks for a team.</p>
        <p class="pt-price d-flex flex-wrap align-items-baseline"><span class="pt-amt">$6</span><span class="pt-per">per user / month</span></p>
        <a class="btn pt-btn d-block w-100" href="#">Get Teams</a>
        <p class="pt-lead">Everything in Pro, and:</p>
        <ul class="pt-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>Shared spaces</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>Admin console</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>Single sign-on</span></li>
        </ul>
      </div></article></div>
  </div>
</section></div>

CSS

/* Pricing cards on Bootstrap's .row-cols-*, .card, .btn and .badge, restyled through their CSS variables. */
.pt{--pt-accent:#4338ca;--pt-accent-dark:#3730a3;--pt-ink:#1e1b4b;--pt-muted:#5b6478;--pt-line:#e2e8f0;--pt-badge:#fbbf24;color:#1e293b}
.pt-head{max-width:680px;margin:0 auto 44px}
.pt-kicker{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pt-accent)}
.pt-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(--pt-ink)}
.pt-sub{margin:12px 0 0;font-size:1rem;line-height:1.55;color:var(--pt-muted)}
.pt-card{--bs-card-spacer-y:32px;--bs-card-spacer-x:28px;--bs-card-border-color:var(--pt-line);--bs-card-border-radius:18px;--bs-card-inner-border-radius:17px;--bs-card-bg:#fff;--bs-card-color:#1e293b;box-shadow:0 1px 2px rgba(15,23,42,.05)}
.pt-card h3{margin:0;font-size:1.15rem;font-weight:700;line-height:1.3;color:var(--pt-ink)}
.pt-desc{margin:8px 0 0;font-size:.92rem;line-height:1.5;color:var(--pt-muted)}
.pt-price{gap:4px 8px;margin:22px 0 0;color:var(--pt-ink)}
.pt-amt{font-size:2.9rem;font-weight:800;line-height:1;letter-spacing:-.04em}
.pt-per{font-size:.9rem;color:var(--pt-muted)}
.pt-note{margin:8px 0 0;font-size:.82rem;line-height:1.4;color:var(--pt-muted)}
.pt-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:999px;
  --bs-btn-color:var(--pt-accent);--bs-btn-bg:transparent;--bs-btn-border-color:var(--pt-accent);--bs-btn-hover-color:var(--pt-accent);--bs-btn-hover-bg:#eef2ff;--bs-btn-hover-border-color:var(--pt-accent);
  --bs-btn-active-color:var(--pt-accent);--bs-btn-active-bg:#e0e7ff;--bs-btn-active-border-color:var(--pt-accent);margin-top:24px;transition:background-color .2s,color .2s,border-color .2s}
.pt-btn:focus-visible{outline:3px solid var(--pt-accent);outline-offset:3px;box-shadow:none}
.pt-list{display:grid;gap:12px;margin:26px 0 0;padding:24px 0 0;border-top:1px solid var(--pt-line);font-size:.92rem;line-height:1.4}
.pt-list li{display:flex;align-items:flex-start;gap:10px}
.pt-list svg{flex:none;margin-top:1px;color:var(--pt-accent)}
.pt-list .no,.pt-list .no svg{color:var(--pt-muted)}
.pt-card.is-rec{--bs-card-bg:var(--pt-ink);--bs-card-border-color:var(--pt-ink);--bs-card-color:#fff;box-shadow:0 24px 48px -18px rgba(30,27,75,.55)}
.pt-card.is-rec h3,.pt-card.is-rec .pt-price{color:#fff}
.pt-card.is-rec .pt-desc,.pt-card.is-rec .pt-per,.pt-card.is-rec .pt-note,.pt-card.is-rec .pt-list .no{color:#c7d2fe}
.pt-card.is-rec .pt-list{border-color:rgba(255,255,255,.18)}
.pt-card.is-rec .pt-list svg{color:#a5b4fc}
.pt-card.is-rec .pt-btn{--bs-btn-color:var(--pt-ink);--bs-btn-bg:#fff;--bs-btn-border-color:#fff;--bs-btn-hover-color:var(--pt-ink);--bs-btn-hover-bg:#e0e7ff;--bs-btn-hover-border-color:#e0e7ff;--bs-btn-active-color:var(--pt-ink);--bs-btn-active-bg:#c7d2fe;--bs-btn-active-border-color:#c7d2fe}
.pt-card.is-rec .pt-btn:focus-visible{outline-color:#fff}
.pt-badge{--bs-badge-padding-x:14px;--bs-badge-padding-y:7px;--bs-badge-font-size:.72rem;--bs-badge-font-weight:800;--bs-badge-color:var(--pt-ink);position:absolute;top:0;left:50%;transform:translate(-50%,-50%);margin:0;background:var(--pt-badge);letter-spacing:.08em;text-transform:uppercase}
.pt-bar{gap:8px 24px;margin:0 0 28px}
.pt-bar .pt-title{margin-top:6px;font-size:clamp(1.5rem,3.4vw,1.9rem)}
.pt-bar .pt-sub{margin:0;font-size:.92rem}
.pt-four{--bs-gutter-x:20px;--bs-gutter-y:20px}
.pt-card.sm{--bs-card-spacer-y:26px;--bs-card-spacer-x:22px}
.pt-card.sm .pt-amt{font-size:2.3rem}
@media (min-width:576px){.pt-card.sm .pt-desc{min-height:3em}}
.pt-top{gap:6px}
.pt-tag{--bs-badge-padding-x:10px;--bs-badge-padding-y:5px;--bs-badge-font-size:.7rem;--bs-badge-font-weight:800;--bs-badge-color:var(--pt-accent-dark);margin:0;background:#e0e7ff;letter-spacing:.08em;text-transform:uppercase}
.pt-lead{margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--pt-line);font-size:.82rem;font-weight:700;color:var(--pt-ink)}
.pt-card.sm .pt-list{margin-top:12px;padding-top:0;border-top:0;gap:10px}
.pt-card.is-pick{--bs-card-border-width:2px;--bs-card-border-color:var(--pt-accent);--bs-card-bg:#f8f8ff;--bs-card-spacer-y:25px;--bs-card-spacer-x:21px;box-shadow:0 18px 36px -20px rgba(67,56,202,.5)}
.pt-card.is-pick .pt-btn{--bs-btn-color:#fff;--bs-btn-bg:var(--pt-accent);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--pt-accent-dark);--bs-btn-hover-border-color:var(--pt-accent-dark);--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--pt-accent-dark)}
@media (prefers-reduced-motion:reduce){.pt-btn{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5b6478] uppercase">Three tiers, highlighted middle plan</span>
<section class="text-[#1e293b]" aria-labelledby="ld-title">
  <header class="mx-auto mb-11 max-w-[680px] text-center"><p class="text-[.78rem] font-bold tracking-[.14em] text-[#4338ca] uppercase">Ledgerleaf pricing</p><h2 class="mt-2.5 text-[clamp(1.65rem,4vw,2.3rem)] leading-[1.15] font-extrabold tracking-[-.025em] text-[#1e1b4b]" id="ld-title">Bookkeeping that keeps up with you</h2><p class="mt-3 text-base leading-[1.55] text-[#5b6478]">Every plan includes bank sync, receipt capture and a 30-day free trial. Prices in US dollars.</p></header>
  <div class="grid grid-cols-1 gap-6 min-[992px]:grid-cols-3">
    <article class="relative flex flex-col rounded-[18px] border px-7 py-8 border-[#e2e8f0] bg-white shadow-[0_1px_2px_rgba(15,23,42,.05)]" aria-labelledby="ld-solo">
      <h3 class="text-[1.15rem] leading-[1.3] font-bold text-[#1e1b4b]" id="ld-solo">Solo</h3>
      <p class="mt-2 text-[.92rem] leading-normal text-[#5b6478]">For freelancers sending a handful of invoices a month.</p>
      <p class="mt-[22px] flex flex-wrap items-baseline gap-x-2 gap-y-1 text-[#1e1b4b]"><span class="text-[2.9rem] leading-none font-extrabold tracking-[-.04em]">$9</span><span class="text-[.9rem] text-[#5b6478]">per month</span></p>
      <p class="mt-2 text-[.82rem] leading-[1.4] text-[#5b6478]">Billed monthly. Cancel any time.</p>
      <a class="mt-6 block rounded-full border-[1.5px] 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 border-[#4338ca] text-[#4338ca] hover:bg-[#eef2ff] focus-visible:outline-[#4338ca]" href="#">Start with Solo</a>
      <ul class="mt-[26px] grid gap-3 border-t pt-6 text-[.92rem] leading-[1.4] border-[#e2e8f0]">
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#4338ca]" 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 user</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#4338ca]" 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>20 invoices a month</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#4338ca]" 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 connected bank accounts</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#4338ca]" 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>Receipt capture</span></li>
        <li class="flex items-start gap-2.5 text-[#5b6478]"><svg class="mt-px flex-none" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l8 8M14 6l-8 8"/></svg><span><span class="sr-only">Not included: </span>Payroll</span></li>
        <li class="flex items-start gap-2.5 text-[#5b6478]"><svg class="mt-px flex-none" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l8 8M14 6l-8 8"/></svg><span><span class="sr-only">Not included: </span>Multi-currency invoices</span></li>
      </ul>
    </article>
    <article class="relative flex flex-col rounded-[18px] border px-7 py-8 border-[#1e1b4b] bg-[#1e1b4b] text-white shadow-[0_24px_48px_-18px_rgba(30,27,75,.55)]" aria-labelledby="ld-studio">
      <p class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[#fbbf24] px-3.5 py-[7px] text-[.72rem] leading-none font-extrabold tracking-[.08em] whitespace-nowrap text-[#1e1b4b] uppercase">Recommended</p>
      <h3 class="text-[1.15rem] leading-[1.3] font-bold text-white" id="ld-studio">Studio</h3>
      <p class="mt-2 text-[.92rem] leading-normal text-[#c7d2fe]">For small teams that bill clients and pay contractors.</p>
      <p class="mt-[22px] flex flex-wrap items-baseline gap-x-2 gap-y-1 text-white"><span class="text-[2.9rem] leading-none font-extrabold tracking-[-.04em]">$24</span><span class="text-[.9rem] text-[#c7d2fe]">per month</span></p>
      <p class="mt-2 text-[.82rem] leading-[1.4] text-[#c7d2fe]">Billed monthly. Cancel any time.</p>
      <a class="mt-6 block rounded-full border-[1.5px] 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 border-white bg-white text-[#1e1b4b] hover:border-[#e0e7ff] hover:bg-[#e0e7ff] focus-visible:outline-white" href="#">Start with Studio</a>
      <ul class="mt-[26px] grid gap-3 border-t pt-6 text-[.92rem] leading-[1.4] border-white/18">
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#a5b4fc]" 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>Up to 5 users</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#a5b4fc]" 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 invoices</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#a5b4fc]" 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>10 connected bank accounts</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#a5b4fc]" 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>Receipt capture</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#a5b4fc]" 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>Payroll for up to 10 people</span></li>
        <li class="flex items-start gap-2.5 text-[#c7d2fe]"><svg class="mt-px flex-none" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l8 8M14 6l-8 8"/></svg><span><span class="sr-only">Not included: </span>Multi-currency invoices</span></li>
      </ul>
    </article>
    <article class="relative flex flex-col rounded-[18px] border px-7 py-8 border-[#e2e8f0] bg-white shadow-[0_1px_2px_rgba(15,23,42,.05)]" aria-labelledby="ld-firm">
      <h3 class="text-[1.15rem] leading-[1.3] font-bold text-[#1e1b4b]" id="ld-firm">Firm</h3>
      <p class="mt-2 text-[.92rem] leading-normal text-[#5b6478]">For accountants keeping the books for several companies.</p>
      <p class="mt-[22px] flex flex-wrap items-baseline gap-x-2 gap-y-1 text-[#1e1b4b]"><span class="text-[2.9rem] leading-none font-extrabold tracking-[-.04em]">$59</span><span class="text-[.9rem] text-[#5b6478]">per month</span></p>
      <p class="mt-2 text-[.82rem] leading-[1.4] text-[#5b6478]">Billed monthly. Cancel any time.</p>
      <a class="mt-6 block rounded-full border-[1.5px] 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 border-[#4338ca] text-[#4338ca] hover:bg-[#eef2ff] focus-visible:outline-[#4338ca]" href="#">Start with Firm</a>
      <ul class="mt-[26px] grid gap-3 border-t pt-6 text-[.92rem] leading-[1.4] border-[#e2e8f0]">
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#4338ca]" 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 users</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#4338ca]" 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 invoices</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#4338ca]" 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 bank accounts</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#4338ca]" 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>Receipt capture</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#4338ca]" 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>Payroll for up to 100 people</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#4338ca]" 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>Multi-currency invoices</span></li>
      </ul>
    </article>
  </div>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5b6478] uppercase">Four tiers with a free plan</span>
<section class="text-[#1e293b]" aria-labelledby="pg-title">
  <header class="mb-7 flex flex-wrap items-end justify-between gap-x-6 gap-y-2"><div><p class="text-[.78rem] font-bold tracking-[.14em] text-[#4338ca] uppercase">Pinegrove Notes</p><h2 class="mt-1.5 text-[clamp(1.5rem,3.4vw,1.9rem)] leading-[1.15] font-extrabold tracking-[-.025em] text-[#1e1b4b]" id="pg-title">Pick a plan for your notes</h2></div><p class="text-[.92rem] leading-[1.55] text-[#5b6478]">Prices in US dollars. Switch or cancel at any time.</p></header>
  <div class="grid grid-cols-1 gap-5 min-[576px]:grid-cols-2 min-[992px]:grid-cols-4">
    <article class="flex flex-col rounded-[18px] border border-[#e2e8f0] bg-white px-[22px] py-[26px] shadow-[0_1px_2px_rgba(15,23,42,.05)]" aria-labelledby="pg-free">
      <div class="flex flex-wrap items-center justify-between gap-1.5"><h3 class="text-[1.15rem] leading-[1.3] font-bold text-[#1e1b4b]" id="pg-free">Free</h3></div>
      <p class="mt-2 text-[.92rem] leading-normal text-[#5b6478] min-[576px]:min-h-[3em]">Personal notes on one device.</p>
      <p class="mt-[22px] flex flex-wrap items-baseline gap-x-2 gap-y-1 text-[#1e1b4b]"><span class="text-[2.3rem] leading-none font-extrabold tracking-[-.04em]">$0</span><span class="text-[.9rem] text-[#5b6478]">forever</span></p>
      <a class="mt-6 block rounded-full border-[1.5px] border-[#4338ca] 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-[#4338ca] text-[#4338ca] hover:bg-[#eef2ff]" href="#">Get Free</a>
      <p class="mt-6 border-t border-[#e2e8f0] pt-5 text-[.82rem] font-bold text-[#1e1b4b]">Includes:</p>
      <ul class="mt-3 grid gap-2.5 text-[.92rem] leading-[1.4]">
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#4338ca]" 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 device</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#4338ca]" 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 MB of storage</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#4338ca]" 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>Markdown export</span></li>
      </ul>
    </article>
    <article class="flex flex-col rounded-[18px] border border-[#e2e8f0] bg-white px-[22px] py-[26px] shadow-[0_1px_2px_rgba(15,23,42,.05)]" aria-labelledby="pg-plus">
      <div class="flex flex-wrap items-center justify-between gap-1.5"><h3 class="text-[1.15rem] leading-[1.3] font-bold text-[#1e1b4b]" id="pg-plus">Plus</h3></div>
      <p class="mt-2 text-[.92rem] leading-normal text-[#5b6478] min-[576px]:min-h-[3em]">Your notes on phone and laptop.</p>
      <p class="mt-[22px] flex flex-wrap items-baseline gap-x-2 gap-y-1 text-[#1e1b4b]"><span class="text-[2.3rem] leading-none font-extrabold tracking-[-.04em]">$4</span><span class="text-[.9rem] text-[#5b6478]">per month</span></p>
      <a class="mt-6 block rounded-full border-[1.5px] border-[#4338ca] 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-[#4338ca] text-[#4338ca] hover:bg-[#eef2ff]" href="#">Get Plus</a>
      <p class="mt-6 border-t border-[#e2e8f0] pt-5 text-[.82rem] font-bold text-[#1e1b4b]">Everything in Free, and:</p>
      <ul class="mt-3 grid gap-2.5 text-[.92rem] leading-[1.4]">
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#4338ca]" 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 devices</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#4338ca]" 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>10 GB of storage</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#4338ca]" 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>Offline notebooks</span></li>
      </ul>
    </article>
    <article class="flex flex-col rounded-[18px] border-2 border-[#4338ca] bg-[#f8f8ff] px-[21px] py-[25px] shadow-[0_18px_36px_-20px_rgba(67,56,202,.5)]" aria-labelledby="pg-pro">
      <div class="flex flex-wrap items-center justify-between gap-1.5"><h3 class="text-[1.15rem] leading-[1.3] font-bold text-[#1e1b4b]" id="pg-pro">Pro</h3><p class="rounded-full bg-[#e0e7ff] px-2.5 py-[5px] text-[.7rem] leading-none font-extrabold tracking-[.08em] text-[#3730a3] uppercase">Recommended</p></div>
      <p class="mt-2 text-[.92rem] leading-normal text-[#5b6478] min-[576px]:min-h-[3em]">For writers and researchers.</p>
      <p class="mt-[22px] flex flex-wrap items-baseline gap-x-2 gap-y-1 text-[#1e1b4b]"><span class="text-[2.3rem] leading-none font-extrabold tracking-[-.04em]">$8</span><span class="text-[.9rem] text-[#5b6478]">per month</span></p>
      <a class="mt-6 block rounded-full border-[1.5px] border-[#4338ca] 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-[#4338ca] bg-[#4338ca] text-white hover:border-[#3730a3] hover:bg-[#3730a3]" href="#">Get Pro</a>
      <p class="mt-6 border-t border-[#e2e8f0] pt-5 text-[.82rem] font-bold text-[#1e1b4b]">Everything in Plus, and:</p>
      <ul class="mt-3 grid gap-2.5 text-[.92rem] leading-[1.4]">
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#4338ca]" 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 devices</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#4338ca]" 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 of storage</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#4338ca]" 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 year of version history</span></li>
      </ul>
    </article>
    <article class="flex flex-col rounded-[18px] border border-[#e2e8f0] bg-white px-[22px] py-[26px] shadow-[0_1px_2px_rgba(15,23,42,.05)]" aria-labelledby="pg-teams">
      <div class="flex flex-wrap items-center justify-between gap-1.5"><h3 class="text-[1.15rem] leading-[1.3] font-bold text-[#1e1b4b]" id="pg-teams">Teams</h3></div>
      <p class="mt-2 text-[.92rem] leading-normal text-[#5b6478] min-[576px]:min-h-[3em]">Shared notebooks for a team.</p>
      <p class="mt-[22px] flex flex-wrap items-baseline gap-x-2 gap-y-1 text-[#1e1b4b]"><span class="text-[2.3rem] leading-none font-extrabold tracking-[-.04em]">$6</span><span class="text-[.9rem] text-[#5b6478]">per user / month</span></p>
      <a class="mt-6 block rounded-full border-[1.5px] border-[#4338ca] 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-[#4338ca] text-[#4338ca] hover:bg-[#eef2ff]" href="#">Get Teams</a>
      <p class="mt-6 border-t border-[#e2e8f0] pt-5 text-[.82rem] font-bold text-[#1e1b4b]">Everything in Pro, and:</p>
      <ul class="mt-3 grid gap-2.5 text-[.92rem] leading-[1.4]">
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#4338ca]" 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>Shared spaces</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#4338ca]" 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>Admin console</span></li>
        <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#4338ca]" 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>Single sign-on</span></li>
      </ul>
    </article>
  </div>
</section></div>

About this set

Two tiered pricing layouts for the classic pricing page, where one plan should stand out without shouting. Three tiers, highlighted middle plan is a bookkeeping app’s pricing with Solo, Studio and Firm cards: the middle card turns deep indigo, carries a Recommended badge on its top edge and gets the solid button, while the other two stay white with outline buttons. Each card lists the same six features, so a buyer can read across the plans, and features a plan lacks are shown with a cross and muted text instead of being left out. Four tiers with a free plan is a notes app with Free, Plus, Pro and Teams cards in a denser grid, where each plan lists only what it adds to the one before it and the recommended plan gets an accent border and a Recommended tag beside its name. The columns step from one to two to four, and in the four-tier grid the descriptions keep a fixed height on wider screens so the prices line up. The plain CSS version is CSS Grid, the Bootstrap version uses .row-cols-*, .card, .badge and .btn, and the Tailwind version uses grid utilities. No JavaScript.

What’s included

Three-tier and four-tier layouts with one highlighted plan
Recommended badge is real text, not only a colour change
Included and not included features carry visually hidden text, not just a tick or a cross
Feature lists use the same rows across plans so they can be compared
Bootstrap version built from .row-cols-*, .card, .badge and .btn

Accessibility

Each plan is an article named by its heading, and the Recommended label is visible text read in order with the plan name. Tick and cross icons are hidden from assistive technology and each feature starts with visually hidden Included or Not included text. Buttons name their plan, such as Start with Studio, show a 3px outline on keyboard focus, and their colour transition is switched off under prefers-reduced-motion.

Customise it

Change --pt-accent, --pt-ink, --pt-badge and --pt-radius on .pt for colour and shape. In Bootstrap the same variables feed the --bs-card-* and --bs-btn-* variables; in Tailwind swap the #4338ca and #1e1b4b colour utilities.

CSS code

Bootstrap 5 code

Tailwind 4 code

About this set

What’s included

Accessibility

Customise it

More from Pricing Tables