Open demo

CSS code

HTML 
<div><span class="lbl">One plan, everything included</span>
<section class="sp sp-one" aria-labelledby="mj-title">
  <div class="sp-one-price">
    <p class="sp-kicker">Morrow Journal</p>
    <h2 id="mj-title">One plan. Every feature.</h2>
    <p class="sp-amount"><b>$6</b><span>per month</span></p>
    <p class="sp-alt">Or <strong>$60 a year</strong>, which is two months free.</p>
    <a class="sp-btn" href="#">Start your 30-day trial</a>
    <p class="sp-note">No card needed for the trial.</p>
  </div>
  <div class="sp-one-list">
    <h3>Everything included</h3>
    <ul class="sp-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 journals and entries</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>Photos, audio and handwriting</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>End-to-end encryption</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>Sync on phone, tablet and web</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>Daily prompts and reminders</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>Export to PDF and Markdown</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>Search across every entry</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>Priority email support</span></li>
    </ul>
  </div>
</section></div>

<div class="pair">
<div><span class="lbl">Lifetime licence ticket</span>
<section class="sp sp-ticket" aria-labelledby="ci-title">
  <div class="sp-ticket-top">
    <p class="sp-kicker">Cobalt Icons</p>
    <h3 id="ci-title">Lifetime licence</h3>
    <p class="sp-amount"><b>$89</b><span>one payment</span></p>
    <p class="sp-compare">A yearly licence costs $39 a year, so lifetime pays for itself in year three.</p>
    <ul class="sp-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>2,400 icons in 3 styles</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>SVG, PNG and Figma files</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>Every future icon at no cost</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 commercial projects</span></li>
    </ul>
  </div>
  <div class="sp-ticket-cut" aria-hidden="true"></div>
  <div class="sp-ticket-bottom">
    <a class="sp-btn" href="#">Buy the lifetime licence</a>
    <p class="sp-note">30-day refund if it is not for you.</p>
  </div>
</section></div>

<div><span class="lbl">Pay what you want</span>
<section class="sp sp-pwyw" aria-labelledby="ms-title">
  <p class="sp-kicker">Marlow Serif</p>
  <h3 id="ms-title">Pay what you want</h3>
  <p class="sp-desc">The full family: six weights with italics, for desktop and web. Every price gets the same files.</p>
  <form action="#">
    <fieldset class="sp-chips">
      <legend>Choose a price</legend>
      <div class="sp-chip-row">
        <label class="sp-chip"><input type="radio" name="ms-price" value="12"><span><b>$12</b><small>Minimum</small></span></label>
        <label class="sp-chip"><input type="radio" name="ms-price" value="24" checked><span><b>$24</b><small>Suggested</small></span></label>
        <label class="sp-chip"><input type="radio" name="ms-price" value="40"><span><b>$40</b><small>Supporter</small></span></label>
      </div>
    </fieldset>
    <div class="sp-own">
      <label for="ms-own">Or enter your own amount, from $12</label>
      <div class="sp-field"><span aria-hidden="true">$</span><input id="ms-own" name="ms-own" type="number" min="12" step="1" inputmode="numeric" placeholder="30"></div>
    </div>
    <button class="sp-btn" type="submit">Continue to checkout</button>
  </form>
</section></div>
</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}
/* Single-plan cards: one plan with everything included, a lifetime licence ticket, and pay-what-you-want with radio chips. */
.sp{--sp-accent:#c2410c;--sp-accent-dark:#9a3412;--sp-ink:#1c1917;--sp-muted:#57534e;--sp-line:#e7ded3;--sp-tint:#fff3e8;--sp-edge:#8a817a;--sp-bg:#fbf7f2;--sp-radius:24px;color:var(--sp-ink)}
.sp *,.sp *::before,.sp *::after{box-sizing:border-box}
.sp h2,.sp h3{margin:0}
.sp-kicker{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sp-accent-dark)}
.sp-btn{display:block;width:100%;padding:14px 20px;border:0;border-radius:12px;background:var(--sp-accent);color:#fff;font:inherit;font-size:1rem;font-weight:700;line-height:1.3;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .2s}
.sp-btn:hover{background:var(--sp-accent-dark)}
.sp-btn:focus-visible{outline:3px solid var(--sp-accent);outline-offset:3px}
.sp-list{display:grid;gap:12px;margin:0;padding:0;list-style:none;font-size:.95rem;line-height:1.4}
.sp-list li{display:flex;align-items:flex-start;gap:10px}
.sp-list svg{flex:none;margin-top:1px;color:var(--sp-accent)}
.sp-note{margin:12px 0 0;font-size:.84rem;line-height:1.45;color:var(--sp-muted);text-align:center}
/* 1. one plan, everything included */
.sp-one{display:grid;grid-template-columns:1fr;background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius);overflow:hidden}
@media (min-width:768px){.sp-one{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.sp-one-price{padding:36px 32px;background:var(--sp-tint)}
.sp-one-price h2{margin-top:8px;font-size:1.6rem;font-weight:800;line-height:1.2;letter-spacing:-.02em}
.sp-amount{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:24px 0 0}
.sp-amount b{font-size:3.4rem;font-weight:800;line-height:1;letter-spacing:-.04em}
.sp-amount span{font-size:.95rem;color:var(--sp-muted)}
.sp-alt{margin:8px 0 24px;font-size:.92rem;line-height:1.45;color:var(--sp-muted)}
.sp-alt strong{color:var(--sp-accent-dark)}
.sp-one-list{padding:36px 32px}
.sp-one-list h3{margin-bottom:18px;font-size:1rem;font-weight:700}
@media (min-width:576px){.sp-one-list .sp-list{grid-template-columns:1fr 1fr;column-gap:24px}}
/* 2. lifetime ticket */
.sp-ticket{position:relative;max-width:460px;background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius)}
.sp-ticket-top{padding:32px 30px 26px}
.sp-ticket h3,.sp-pwyw h3{margin-top:8px;font-size:1.45rem;font-weight:800;line-height:1.2;letter-spacing:-.02em}
.sp-compare{margin:10px 0 22px;font-size:.92rem;line-height:1.5;color:var(--sp-muted)}
.sp-ticket-cut{position:relative;height:0;border-top:2px dashed var(--sp-line);margin:0 22px}
.sp-ticket-cut::before,.sp-ticket-cut::after{content:"";position:absolute;top:-13px;width:24px;height:24px;border:1px solid var(--sp-line);border-radius:50%;background:var(--sp-bg)}
.sp-ticket-cut::before{left:-35px;clip-path:inset(0 0 0 50%)}
.sp-ticket-cut::after{right:-35px;clip-path:inset(0 50% 0 0)}
.sp-ticket-bottom{padding:26px 30px 28px}
/* 3. pay what you want */
.sp-pwyw{max-width:500px;padding:32px 30px 28px;background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius)}
.sp-pwyw p.sp-desc{margin:10px 0 0;font-size:.92rem;line-height:1.5;color:var(--sp-muted)}
.sp-chips{min-width:0;margin:24px 0 0;padding:0;border:0}
.sp-chips legend,.sp-own label{display:block;margin:0 0 10px;padding:0;font-size:.86rem;font-weight:700}
.sp-chip-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sp-chip{position:relative;display:block;cursor:pointer}
.sp-chip input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.sp-chip span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border:1.5px solid var(--sp-edge);border-radius:14px;transition:background-color .2s,border-color .2s,color .2s}
.sp-chip b{font-size:1.35rem;font-weight:800;line-height:1.1}
.sp-chip small{font-size:.76rem;color:var(--sp-muted)}
.sp-chip:hover span{border-color:var(--sp-ink)}
.sp-chip input:checked+span{border-color:var(--sp-accent);background:var(--sp-accent);color:#fff}
.sp-chip input:checked+span small{color:#fff}
.sp-chip input:focus-visible+span{outline:3px solid var(--sp-accent);outline-offset:3px}
.sp-own{margin:20px 0 22px}
.sp-field{display:flex;align-items:center;border:1.5px solid var(--sp-edge);border-radius:12px;background:#fff}
.sp-field span{padding:0 4px 0 14px;font-weight:700;color:var(--sp-muted)}
.sp-field input{flex:1;min-width:0;padding:12px 14px 12px 4px;border:0;border-radius:12px;background:transparent;color:var(--sp-ink);font:inherit;font-size:1rem}
.sp-field:focus-within{border-color:var(--sp-accent);outline:3px solid var(--sp-accent);outline-offset:2px}
.sp-field input:focus{outline:none}
@media (prefers-reduced-motion:reduce){.sp-btn,.sp-chip span{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">One plan, everything included</span>
<section class="sp card sp-card sp-one" aria-labelledby="mj-title">
  <div class="row">
  <div class="col-12 col-md-5 sp-one-price">
    <p class="sp-kicker">Morrow Journal</p>
    <h2 id="mj-title">One plan. Every feature.</h2>
    <p class="sp-amount d-flex flex-wrap align-items-baseline"><b>$6</b><span>per month</span></p>
    <p class="sp-alt">Or <strong>$60 a year</strong>, which is two months free.</p>
    <a class="btn sp-btn d-block" href="#">Start your 30-day trial</a>
    <p class="sp-note">No card needed for the trial.</p>
  </div>
  <div class="col-12 col-md-7 sp-one-list">
    <h3>Everything included</h3>
    <ul class="sp-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 journals and entries</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>Photos, audio and handwriting</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>End-to-end encryption</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>Sync on phone, tablet and web</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>Daily prompts and reminders</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>Export to PDF and Markdown</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>Search across every entry</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>Priority email support</span></li>
    </ul>
  </div>
  </div>
</section></div>

<div class="pair">
<div><span class="lbl">Lifetime licence ticket</span>
<section class="sp card sp-card sp-ticket" aria-labelledby="ci-title">
  <div class="sp-ticket-top">
    <p class="sp-kicker">Cobalt Icons</p>
    <h3 id="ci-title">Lifetime licence</h3>
    <p class="sp-amount d-flex flex-wrap align-items-baseline"><b>$89</b><span>one payment</span></p>
    <p class="sp-compare">A yearly licence costs $39 a year, so lifetime pays for itself in year three.</p>
    <ul class="sp-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>2,400 icons in 3 styles</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>SVG, PNG and Figma files</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>Every future icon at no cost</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 commercial projects</span></li>
    </ul>
  </div>
  <div class="sp-ticket-cut" aria-hidden="true"></div>
  <div class="sp-ticket-bottom">
    <a class="btn sp-btn d-block" href="#">Buy the lifetime licence</a>
    <p class="sp-note">30-day refund if it is not for you.</p>
  </div>
</section></div>

<div><span class="lbl">Pay what you want</span>
<section class="sp card sp-card sp-pwyw" aria-labelledby="ms-title"><div class="card-body">
  <p class="sp-kicker">Marlow Serif</p>
  <h3 id="ms-title">Pay what you want</h3>
  <p class="sp-desc">The full family: six weights with italics, for desktop and web. Every price gets the same files.</p>
  <form action="#">
    <fieldset class="sp-chips">
      <legend>Choose a price</legend>
      <div class="sp-chip-row">
        <input type="radio" class="btn-check" name="ms-price" id="ms-12" value="12"><label class="btn" for="ms-12"><b>$12</b><small>Minimum</small></label>
        <input type="radio" class="btn-check" name="ms-price" id="ms-24" value="24" checked><label class="btn" for="ms-24"><b>$24</b><small>Suggested</small></label>
        <input type="radio" class="btn-check" name="ms-price" id="ms-40" value="40"><label class="btn" for="ms-40"><b>$40</b><small>Supporter</small></label>
      </div>
    </fieldset>
    <div class="sp-own">
      <label class="form-label" for="ms-own">Or enter your own amount, from $12</label>
      <div class="input-group"><span class="input-group-text" aria-hidden="true">$</span><input class="form-control" id="ms-own" name="ms-own" type="number" min="12" step="1" inputmode="numeric" placeholder="30"></div>
    </div>
    <button class="btn sp-btn w-100" type="submit">Continue to checkout</button>
  </form>
</div></section></div>
</div>
CSS 
/* Single-plan cards on Bootstrap .card, .btn, .btn-check and .input-group, restyled through their CSS variables. */
.sp{--sp-accent:#c2410c;--sp-accent-dark:#9a3412;--sp-ink:#1c1917;--sp-muted:#57534e;--sp-line:#e7ded3;--sp-tint:#fff3e8;--sp-edge:#8a817a;--sp-bg:#fbf7f2;color:var(--sp-ink)}
.sp h2,.sp h3{margin:0}
.sp-card{--bs-card-border-color:var(--sp-line);--bs-card-border-radius:24px;--bs-card-inner-border-radius:23px;--bs-card-color:var(--sp-ink)}
.sp-kicker{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sp-accent-dark)}
.sp-btn{--bs-btn-padding-y:14px;--bs-btn-padding-x:20px;--bs-btn-font-size:1rem;--bs-btn-font-weight:700;--bs-btn-line-height:1.3;--bs-btn-border-width:0;--bs-btn-border-radius:12px;
  --bs-btn-color:#fff;--bs-btn-bg:var(--sp-accent);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--sp-accent-dark);--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--sp-accent-dark);transition:background-color .2s}
.sp-btn:focus-visible{outline:3px solid var(--sp-accent);outline-offset:3px;box-shadow:none}
.sp-list{display:grid;gap:12px;margin:0;font-size:.95rem;line-height:1.4}
.sp-list li{display:flex;align-items:flex-start;gap:10px}
.sp-list svg{flex:none;margin-top:1px;color:var(--sp-accent)}
.sp-note{margin:12px 0 0;font-size:.84rem;line-height:1.45;color:var(--sp-muted);text-align:center}
.sp-one{overflow:hidden}
.sp-one .row{--bs-gutter-x:0}
.sp-one-price{padding:36px 32px;background:var(--sp-tint)}
.sp-one-price h2{margin-top:8px;font-size:1.6rem;font-weight:800;line-height:1.2;letter-spacing:-.02em}
.sp-amount{gap:4px 8px;margin:24px 0 0}
.sp-amount b{font-size:3.4rem;font-weight:800;line-height:1;letter-spacing:-.04em}
.sp-amount span{font-size:.95rem;color:var(--sp-muted)}
.sp-alt{margin:8px 0 24px;font-size:.92rem;line-height:1.45;color:var(--sp-muted)}
.sp-alt strong{color:var(--sp-accent-dark)}
.sp-one-list{padding:36px 32px}
.sp-one-list h3{margin-bottom:18px;font-size:1rem;font-weight:700}
@media (min-width:576px){.sp-one-list .sp-list{grid-template-columns:1fr 1fr;column-gap:24px}}
.sp-ticket{max-width:460px}
.sp-ticket-top{padding:32px 30px 26px}
.sp-ticket h3,.sp-pwyw h3{margin-top:8px;font-size:1.45rem;font-weight:800;line-height:1.2;letter-spacing:-.02em}
.sp-compare{margin:10px 0 22px;font-size:.92rem;line-height:1.5;color:var(--sp-muted)}
.sp-ticket-cut{position:relative;height:0;border-top:2px dashed var(--sp-line);margin:0 22px}
.sp-ticket-cut::before,.sp-ticket-cut::after{content:"";position:absolute;top:-13px;width:24px;height:24px;border:1px solid var(--sp-line);border-radius:50%;background:var(--sp-bg)}
.sp-ticket-cut::before{left:-35px;clip-path:inset(0 0 0 50%)}
.sp-ticket-cut::after{right:-35px;clip-path:inset(0 50% 0 0)}
.sp-ticket-bottom{padding:26px 30px 28px}
.sp-pwyw{--bs-card-spacer-y:32px;--bs-card-spacer-x:30px;max-width:500px}
.sp-pwyw .card-body{padding-bottom:28px}
.sp-desc{margin:10px 0 0;font-size:.92rem;line-height:1.5;color:var(--sp-muted)}
.sp-chips{margin:24px 0 0}
.sp-chips legend,.sp-own .form-label{float:none;width:auto;margin:0 0 10px;padding:0;font-size:.86rem;font-weight:700;line-height:normal}
.sp-chip-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sp-chip-row .btn{--bs-btn-padding-y:12px;--bs-btn-padding-x:6px;--bs-btn-border-width:1.5px;--bs-btn-border-radius:14px;--bs-btn-border-color:var(--sp-edge);--bs-btn-color:var(--sp-ink);--bs-btn-hover-color:var(--sp-ink);--bs-btn-hover-bg:transparent;--bs-btn-hover-border-color:var(--sp-ink);
  --bs-btn-active-color:#fff;--bs-btn-active-bg:var(--sp-accent);--bs-btn-active-border-color:var(--sp-accent);--bs-btn-line-height:normal;display:flex;flex-direction:column;align-items:center;gap:2px;transition:background-color .2s,border-color .2s,color .2s}
.sp-chip-row .btn b{font-size:1.35rem;font-weight:800;line-height:1.1}
.sp-chip-row .btn small{font-size:.76rem;color:var(--sp-muted)}
.sp-chip-row .btn-check:checked+.btn small{color:#fff}
.sp-chip-row .btn-check:focus-visible+.btn{outline:3px solid var(--sp-accent);outline-offset:3px;box-shadow:none}
.sp-own{margin:20px 0 22px}
.sp-own .input-group{border:1.5px solid var(--sp-edge);border-radius:12px;background:#fff}
.sp-own .input-group-text{padding:0 4px 0 14px;border:0;background:transparent;font-weight:700;color:var(--sp-muted)}
.sp-own .form-control{padding:12px 14px 12px 4px;border:0;border-radius:12px;color:var(--sp-ink);font-size:1rem}
.sp-own .form-control:focus{box-shadow:none}
.sp-own .input-group:focus-within{border-color:var(--sp-accent);outline:3px solid var(--sp-accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.sp-btn,.sp-chip-row .btn{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#57534e] uppercase">One plan, everything included</span>
<section class="grid grid-cols-1 overflow-hidden rounded-3xl border border-[#e7ded3] bg-white text-[#1c1917] md:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]" aria-labelledby="mj-title">
  <div class="bg-[#fff3e8] px-8 py-9">
    <p class="text-[.78rem] font-bold tracking-[.14em] text-[#9a3412] uppercase">Morrow Journal</p>
    <h2 class="mt-2 text-[1.6rem] leading-[1.2] font-extrabold tracking-[-.02em]" id="mj-title">One plan. Every feature.</h2>
    <p class="mt-6 flex flex-wrap items-baseline gap-x-2 gap-y-1"><b class="text-[3.4rem] leading-none font-extrabold tracking-[-.04em]">$6</b><span class="text-[.95rem] text-[#57534e]">per month</span></p>
    <p class="mt-2 mb-6 text-[.92rem] leading-[1.45] text-[#57534e]">Or <strong class="text-[#9a3412]">$60 a year</strong>, which is two months free.</p>
    <a class="block w-full cursor-pointer rounded-xl bg-[#c2410c] px-5 py-3.5 text-center text-base leading-[1.3] font-bold text-white no-underline transition-[color,background-color,border-color] duration-200 hover:bg-[#9a3412] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#c2410c] motion-reduce:transition-none" href="#">Start your 30-day trial</a>
    <p class="mt-3 text-center text-[.84rem] leading-[1.45] text-[#57534e]">No card needed for the trial.</p>
  </div>
  <div class="px-8 py-9">
    <h3 class="mb-[18px] text-base font-bold">Everything included</h3>
    <ul class="grid gap-3 text-[.95rem] leading-[1.4] min-[576px]:grid-cols-2 min-[576px]:gap-x-6">
      <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#c2410c]" 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 journals and entries</span></li>
      <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#c2410c]" 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>Photos, audio and handwriting</span></li>
      <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#c2410c]" 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>End-to-end encryption</span></li>
      <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#c2410c]" 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>Sync on phone, tablet and web</span></li>
      <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#c2410c]" 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>Daily prompts and reminders</span></li>
      <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#c2410c]" 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>Export to PDF and Markdown</span></li>
      <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#c2410c]" 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>Search across every entry</span></li>
      <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#c2410c]" 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>Priority email support</span></li>
    </ul>
  </div>
</section></div>

<div class="grid items-start gap-x-8 gap-y-[72px] min-[900px]:grid-cols-2">
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#57534e] uppercase">Lifetime licence ticket</span>
<section class="relative max-w-[460px] rounded-3xl border border-[#e7ded3] bg-white text-[#1c1917]" aria-labelledby="ci-title">
  <div class="px-[30px] pt-8 pb-[26px]">
    <p class="text-[.78rem] font-bold tracking-[.14em] text-[#9a3412] uppercase">Cobalt Icons</p>
    <h3 class="mt-2 text-[1.45rem] leading-[1.2] font-extrabold tracking-[-.02em]" id="ci-title">Lifetime licence</h3>
    <p class="mt-6 flex flex-wrap items-baseline gap-x-2 gap-y-1"><b class="text-[3.4rem] leading-none font-extrabold tracking-[-.04em]">$89</b><span class="text-[.95rem] text-[#57534e]">one payment</span></p>
    <p class="mt-2.5 mb-[22px] text-[.92rem] leading-normal text-[#57534e]">A yearly licence costs $39 a year, so lifetime pays for itself in year three.</p>
    <ul class="grid gap-3 text-[.95rem] leading-[1.4]">
      <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#c2410c]" 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,400 icons in 3 styles</span></li>
      <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#c2410c]" 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>SVG, PNG and Figma files</span></li>
      <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#c2410c]" 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>Every future icon at no cost</span></li>
      <li class="flex items-start gap-2.5"><svg class="mt-px flex-none text-[#c2410c]" 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 commercial projects</span></li>
    </ul>
  </div>
  <div class="relative mx-[22px] h-0 border-t-2 border-dashed border-[#e7ded3] before:absolute before:-top-[13px] before:-left-[35px] before:size-6 before:rounded-full before:border before:border-[#e7ded3] before:bg-[#fbf7f2] before:[clip-path:inset(0_0_0_50%)] before:content-[''] after:absolute after:-top-[13px] after:-right-[35px] after:size-6 after:rounded-full after:border after:border-[#e7ded3] after:bg-[#fbf7f2] after:[clip-path:inset(0_50%_0_0)] after:content-['']" aria-hidden="true"></div>
  <div class="px-[30px] pt-[26px] pb-7">
    <a class="block w-full cursor-pointer rounded-xl bg-[#c2410c] px-5 py-3.5 text-center text-base leading-[1.3] font-bold text-white no-underline transition-[color,background-color,border-color] duration-200 hover:bg-[#9a3412] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#c2410c] motion-reduce:transition-none" href="#">Buy the lifetime licence</a>
    <p class="mt-3 text-center text-[.84rem] leading-[1.45] text-[#57534e]">30-day refund if it is not for you.</p>
  </div>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#57534e] uppercase">Pay what you want</span>
<section class="max-w-[500px] rounded-3xl border border-[#e7ded3] bg-white px-[30px] pt-8 pb-7 text-[#1c1917]" aria-labelledby="ms-title">
  <p class="text-[.78rem] font-bold tracking-[.14em] text-[#9a3412] uppercase">Marlow Serif</p>
  <h3 class="mt-2 text-[1.45rem] leading-[1.2] font-extrabold tracking-[-.02em]" id="ms-title">Pay what you want</h3>
  <p class="mt-2.5 text-[.92rem] leading-normal text-[#57534e]">The full family: six weights with italics, for desktop and web. Every price gets the same files.</p>
  <form action="#">
    <fieldset class="mt-6 min-w-0">
      <legend class="mb-2.5 text-[.86rem] font-bold">Choose a price</legend>
      <div class="grid grid-cols-3 gap-2.5">
        <label class="group/c relative block cursor-pointer"><input class="peer sr-only" type="radio" name="ms-price" value="12"><span class="flex flex-col items-center gap-0.5 rounded-[14px] border-[1.5px] border-[#8a817a] px-1.5 py-3 transition-[color,background-color,border-color] duration-200 group-hover/c:border-[#1c1917] peer-checked:border-[#c2410c] peer-checked:bg-[#c2410c] peer-checked:text-white peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-[#c2410c] motion-reduce:transition-none"><b class="text-[1.35rem] leading-[1.1] font-extrabold">$12</b><small class="text-[.76rem] text-[#57534e] group-has-checked/c:text-white">Minimum</small></span></label>
        <label class="group/c relative block cursor-pointer"><input class="peer sr-only" type="radio" name="ms-price" value="24" checked><span class="flex flex-col items-center gap-0.5 rounded-[14px] border-[1.5px] border-[#8a817a] px-1.5 py-3 transition-[color,background-color,border-color] duration-200 group-hover/c:border-[#1c1917] peer-checked:border-[#c2410c] peer-checked:bg-[#c2410c] peer-checked:text-white peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-[#c2410c] motion-reduce:transition-none"><b class="text-[1.35rem] leading-[1.1] font-extrabold">$24</b><small class="text-[.76rem] text-[#57534e] group-has-checked/c:text-white">Suggested</small></span></label>
        <label class="group/c relative block cursor-pointer"><input class="peer sr-only" type="radio" name="ms-price" value="40"><span class="flex flex-col items-center gap-0.5 rounded-[14px] border-[1.5px] border-[#8a817a] px-1.5 py-3 transition-[color,background-color,border-color] duration-200 group-hover/c:border-[#1c1917] peer-checked:border-[#c2410c] peer-checked:bg-[#c2410c] peer-checked:text-white peer-focus-visible:outline-3 peer-focus-visible:outline-offset-3 peer-focus-visible:outline-[#c2410c] motion-reduce:transition-none"><b class="text-[1.35rem] leading-[1.1] font-extrabold">$40</b><small class="text-[.76rem] text-[#57534e] group-has-checked/c:text-white">Supporter</small></span></label>
      </div>
    </fieldset>
    <div class="mt-5 mb-[22px]">
      <label class="mb-2.5 block text-[.86rem] font-bold" for="ms-own">Or enter your own amount, from $12</label>
      <div class="flex items-center rounded-xl border-[1.5px] border-[#8a817a] bg-white focus-within:border-[#c2410c] focus-within:outline-3 focus-within:outline-offset-2 focus-within:outline-[#c2410c]"><span class="pr-1 pl-3.5 font-bold text-[#57534e]" aria-hidden="true">$</span><input class="min-w-0 flex-1 rounded-xl border-0 bg-transparent py-3 pr-3.5 pl-1 text-base text-[#1c1917] focus:outline-none" id="ms-own" name="ms-own" type="number" min="12" step="1" inputmode="numeric" placeholder="30"></div>
    </div>
    <button class="block w-full cursor-pointer rounded-xl bg-[#c2410c] px-5 py-3.5 text-center text-base leading-[1.3] font-bold text-white no-underline transition-[color,background-color,border-color] duration-200 hover:bg-[#9a3412] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#c2410c] motion-reduce:transition-none" type="submit">Continue to checkout</button>
  </form>
</section></div>
</div>

About this set

Pricing cards for products that do not need tiers: one plan, a one-off licence or a price the buyer chooses. One plan, everything included is a journaling app’s pricing as a single wide card, with the monthly price, the yearly alternative and a trial button in a tinted panel on the left and eight included features in two columns on the right; on phones the panels stack. Lifetime licence ticket is an icon set sold for one payment, drawn as a ticket with a dashed tear line and two notches, with a sentence that compares the lifetime price to the yearly licence so the value is spelled out. Pay what you want is a typeface sold at a price the buyer picks, with three price chips labelled Minimum, Suggested and Supporter and a number field for any other amount from the minimum up. The chips are native radio buttons in a fieldset with a visible legend, and the custom amount field has its own label and a minimum value. In Bootstrap the chips are .btn-check buttons and the amount field is an .input-group. No JavaScript.

What’s included

  • A single-plan card, a lifetime licence ticket and a pay-what-you-want card
  • Price chips are a native radio group with a visible legend
  • Custom amount field with its own label, a dollar prefix and a minimum
  • Lifetime card explains the saving against the yearly price in words
  • Bootstrap version uses .card, .btn-check, .input-group and .btn

Accessibility

Each card is a section named by its heading and the included features start with visually hidden Included text. The price chips are radio buttons in a fieldset with a visible Choose a price legend, the selected chip is filled as well as recoloured, and the focused chip shows a 3px outline. The amount field has a visible label and an outline on focus, and button transitions stop under prefers-reduced-motion.

Customise it

Change --sp-accent, --sp-tint, --sp-edge and --sp-radius on .sp, and set --sp-bg to your page colour so the ticket notches match it. In Bootstrap the chips use --bs-btn-active-bg; in Tailwind edit the peer-checked:bg-[#c2410c] utilities.