Pricing Table Designs — Copy CSS Pricing Components

Ad Slot — Below Header (728×90 Leaderboard)

6 components. Pick one, check it in Preview, open Code to read it, then Copy code — you get the complete HTML and its CSS in one self-contained snippet, so it pastes in looking exactly like the preview.

Simple Two-Tier

HTML + CSS · self-contained29 lines

<div class="nxp1">
  <div class="nxp1-card">
    <h3>Starter</h3>
    <p class="nxp1-price">$9<span>/month</span></p>
    <ul><li>5 projects</li><li>1 GB storage</li><li>Email support</li></ul>
    <a href="#" class="nxp1-btn">Choose Starter</a>
  </div>
  <div class="nxp1-card nxp1-dark">
    <h3>Pro</h3>
    <p class="nxp1-price">$29<span>/month</span></p>
    <ul><li>Unlimited projects</li><li>50 GB storage</li><li>Priority support</li></ul>
    <a href="#" class="nxp1-btn">Choose Pro</a>
  </div>
</div>
<style>
.nxp1, .nxp1 * { box-sizing: border-box; }
.nxp1 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; width: 100%; max-width: 560px; margin: 0 auto; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxp1-card { padding: 26px 24px; border: 1px solid #ece4d8; border-radius: 18px; background: #fff; text-align: center; }
.nxp1-card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.nxp1-price { margin: 0 0 16px; font: 900 40px/1 Georgia,"Times New Roman",serif; }
.nxp1-price span { font: 400 14px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #6d645a; }
.nxp1-card ul { margin: 0 0 20px; padding: 0; list-style: none; color: #5e503f; font-size: 14.5px; line-height: 2; }
.nxp1-btn { display: flex; align-items: center; justify-content: center; min-height: 46px; border: 1.5px solid #2a1f1a; border-radius: 999px; color: #2a1f1a; font-weight: 600; font-size: 15px; text-decoration: none; }
.nxp1-btn:hover { background: #2a1f1a; color: #faf6f0; }
.nxp1-dark { border-color: #2a1f1a; background: #2a1f1a; color: #faf6f0; }
.nxp1-dark .nxp1-price span, .nxp1-dark ul { color: #d4c5a9; }
.nxp1-dark .nxp1-btn { border-color: #faf6f0; background: #faf6f0; color: #2a1f1a; }
.nxp1-dark .nxp1-btn:hover { background: #a24832; border-color: #a24832; color: #fff; }
</style>

Three Tiers

HTML + CSS · self-contained42 lines

<div class="nxp2">
  <div class="nxp2-card">
    <h3>Basic</h3>
    <p class="nxp2-desc">For individuals</p>
    <p class="nxp2-price">$0</p>
    <a href="#" class="nxp2-btn">Get started</a>
    <ul><li>1 user</li><li>3 projects</li><li>Community support</li></ul>
  </div>
  <div class="nxp2-card nxp2-pop">
    <span class="nxp2-flag">Most popular</span>
    <h3>Team</h3>
    <p class="nxp2-desc">For growing teams</p>
    <p class="nxp2-price">$24<span>/user/mo</span></p>
    <a href="#" class="nxp2-btn">Start trial</a>
    <ul><li>Unlimited projects</li><li>Shared workspaces</li><li>Priority support</li></ul>
  </div>
  <div class="nxp2-card">
    <h3>Enterprise</h3>
    <p class="nxp2-desc">For large orgs</p>
    <p class="nxp2-price">Custom</p>
    <a href="#" class="nxp2-btn">Contact sales</a>
    <ul><li>SSO &amp; audit logs</li><li>Dedicated manager</li><li>99.99% SLA</li></ul>
  </div>
</div>
<style>
.nxp2, .nxp2 * { box-sizing: border-box; }
.nxp2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 16px; align-items: stretch; width: 100%; padding-top: 12px; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxp2-card { position: relative; display: flex; flex-direction: column; padding: 26px 22px; border: 1px solid #ece4d8; border-radius: 18px; background: #fff; }
.nxp2-card h3 { margin: 0; font: 700 20px/1.3 Georgia,"Times New Roman",serif; }
.nxp2-desc { margin: 2px 0 14px; color: #6d645a; font-size: 14px; }
.nxp2-price { margin: 0 0 18px; font-size: 34px; font-weight: 800; line-height: 1; }
.nxp2-price span { font-size: 14px; font-weight: 400; color: #6d645a; }
.nxp2-btn { display: flex; align-items: center; justify-content: center; min-height: 46px; margin-bottom: 18px; border-radius: 12px; background: #f5efe6; color: #2a1f1a; font-weight: 600; font-size: 15px; text-decoration: none; }
.nxp2-btn:hover { background: #ece2d4; }
.nxp2-card ul { margin: 0; padding: 0; list-style: none; font-size: 14.5px; }
.nxp2-card li { padding: 7px 0 7px 26px; border-top: 1px solid #f2ece3; position: relative; }
.nxp2-card li::before { content: "✓"; position: absolute; left: 4px; color: #3f7a3a; font-weight: 700; }
.nxp2-pop { border: 2px solid #a24832; box-shadow: 0 16px 40px rgba(162,72,50,.15); }
.nxp2-pop .nxp2-btn { background: #a24832; color: #fff; }
.nxp2-pop .nxp2-btn:hover { background: #8a3a27; }
.nxp2-flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: #a24832; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
</style>

Monthly / Yearly

HTML + CSS · self-contained41 lines

<div class="nxp3">
  <input type="radio" name="nxp3-bill" id="nxp3-m" checked>
  <input type="radio" name="nxp3-bill" id="nxp3-y">
  <div class="nxp3-switch" role="group" aria-label="Billing period">
    <label for="nxp3-m">Monthly</label>
    <label for="nxp3-y">Yearly <em>−20%</em></label>
  </div>
  <div class="nxp3-grid">
    <div class="nxp3-card">
      <h3>Solo</h3>
      <p class="nxp3-price"><span class="nxp3-mo">$12</span><span class="nxp3-yr">$115</span><small class="nxp3-mo">/month</small><small class="nxp3-yr">/year</small></p>
      <a href="#" class="nxp3-btn">Choose Solo</a>
    </div>
    <div class="nxp3-card nxp3-hi">
      <h3>Studio</h3>
      <p class="nxp3-price"><span class="nxp3-mo">$39</span><span class="nxp3-yr">$374</span><small class="nxp3-mo">/month</small><small class="nxp3-yr">/year</small></p>
      <a href="#" class="nxp3-btn">Choose Studio</a>
    </div>
  </div>
</div>
<style>
.nxp3, .nxp3 * { box-sizing: border-box; }
.nxp3 { width: 100%; max-width: 560px; margin: 0 auto; text-align: center; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxp3 > input { position: absolute; opacity: 0; pointer-events: none; }
.nxp3-switch { display: inline-flex; margin-bottom: 20px; padding: 4px; border-radius: 999px; background: #ece2d4; }
.nxp3-switch label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 18px; border-radius: 999px; color: #5e503f; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.nxp3-switch em { color: #3f7a3a; font-style: normal; font-size: 12.5px; }
#nxp3-m:checked ~ .nxp3-switch label[for="nxp3-m"], #nxp3-y:checked ~ .nxp3-switch label[for="nxp3-y"] { background: #fff; color: #2a1f1a; box-shadow: 0 2px 6px rgba(42,31,26,.12); }
#nxp3-m:focus-visible ~ .nxp3-switch label[for="nxp3-m"], #nxp3-y:focus-visible ~ .nxp3-switch label[for="nxp3-y"] { outline: 3px solid #e8b48a; }
.nxp3-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; text-align: left; }
.nxp3-card { padding: 24px 22px; border: 1px solid #ece4d8; border-radius: 18px; background: #fff; }
.nxp3-card h3 { margin: 0 0 8px; font: 700 19px/1.3 Georgia,"Times New Roman",serif; }
.nxp3-price { margin: 0 0 18px; font-size: 36px; font-weight: 800; line-height: 1; }
.nxp3-price small { font-size: 14px; font-weight: 400; color: #6d645a; }
.nxp3 .nxp3-yr { display: none; }
#nxp3-y:checked ~ .nxp3-grid .nxp3-yr { display: inline; }
#nxp3-y:checked ~ .nxp3-grid .nxp3-mo { display: none; }
.nxp3-btn { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 12px; background: #2a1f1a; color: #faf6f0; font-weight: 600; font-size: 15px; text-decoration: none; }
.nxp3-hi { background: #faf6f0; border-color: #d4c5a9; }
.nxp3-hi .nxp3-btn { background: #a24832; }
</style>

Comparison Table

HTML + CSS · self-contained26 lines

<table class="nxp4">
  <caption>Compare plans</caption>
  <thead>
    <tr><th scope="col">Feature</th><th scope="col">Free</th><th scope="col" class="nxp4-hi">Pro</th><th scope="col">Team</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Projects</th><td>3</td><td class="nxp4-hi">∞</td><td>∞</td></tr>
    <tr><th scope="row">Storage</th><td>1 GB</td><td class="nxp4-hi">50 GB</td><td>1 TB</td></tr>
    <tr><th scope="row">Custom domain</th><td aria-label="No">—</td><td class="nxp4-hi" aria-label="Yes">✓</td><td aria-label="Yes">✓</td></tr>
    <tr><th scope="row">SSO</th><td aria-label="No">—</td><td class="nxp4-hi" aria-label="No">—</td><td aria-label="Yes">✓</td></tr>
    <tr class="nxp4-price"><th scope="row">Price</th><td>$0</td><td class="nxp4-hi">$19</td><td>$49</td></tr>
  </tbody>
</table>
<style>
.nxp4, .nxp4 * { box-sizing: border-box; }
.nxp4 { width: 100%; max-width: 640px; margin: 0 auto; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid #ece4d8; border-radius: 16px; background: #fff; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; font-size: 14.5px; table-layout: fixed; }
.nxp4 caption { padding-bottom: 10px; text-align: left; font: 700 19px/1.3 Georgia,"Times New Roman",serif; }
.nxp4 th, .nxp4 td { padding: 12px 8px; border-bottom: 1px solid #f2ece3; text-align: center; overflow-wrap: anywhere; }
.nxp4 th[scope="row"] { text-align: left; padding-left: 14px; font-weight: 500; color: #5e503f; }
.nxp4 thead th { background: #faf6f0; font-weight: 700; }
.nxp4 thead th:first-child { width: 34%; text-align: left; padding-left: 14px; }
.nxp4 .nxp4-hi { background: #fbefe9; color: #8a3a27; font-weight: 700; }
.nxp4 tbody tr:last-child th, .nxp4 tbody tr:last-child td { border-bottom: 0; }
.nxp4-price td { font-size: 17px; font-weight: 800; }
@media (max-width: 420px) { .nxp4 { font-size: 13px; } .nxp4 th, .nxp4 td { padding: 10px 4px; } .nxp4 th[scope="row"], .nxp4 thead th:first-child { padding-left: 10px; } }
</style>

Single Plan

HTML + CSS · self-contained34 lines

<div class="nxp5">
  <div class="nxp5-left">
    <h3>Lifetime access</h3>
    <p>Everything in one simple plan. Pay once, use forever.</p>
    <ul>
      <li>All 120+ templates</li>
      <li>Free updates for life</li>
      <li>Commercial licence</li>
      <li>Private Discord</li>
    </ul>
  </div>
  <div class="nxp5-right">
    <p class="nxp5-label">One-time payment</p>
    <p class="nxp5-price">$149</p>
    <a href="#" class="nxp5-btn">Get lifetime access</a>
    <p class="nxp5-note">30-day money-back guarantee</p>
  </div>
</div>
<style>
.nxp5, .nxp5 * { box-sizing: border-box; }
.nxp5 { display: grid; grid-template-columns: 1.4fr 1fr; width: 100%; max-width: 720px; margin: 0 auto; overflow: hidden; border: 1px solid #ece4d8; border-radius: 20px; background: #fff; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxp5-left { padding: clamp(22px, 4vw, 34px); }
.nxp5-left h3 { margin: 0 0 6px; font: 700 24px/1.25 Georgia,"Times New Roman",serif; }
.nxp5-left p { margin: 0 0 18px; color: #6d645a; font-size: 15px; line-height: 1.55; }
.nxp5-left ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px 16px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; }
.nxp5-left li::before { content: "✓ "; color: #a24832; font-weight: 800; }
.nxp5-right { display: flex; flex-direction: column; justify-content: center; padding: clamp(22px, 4vw, 34px); background: #faf6f0; text-align: center; }
.nxp5-label { margin: 0; color: #6d645a; font-size: 13.5px; font-weight: 600; }
.nxp5-price { margin: 6px 0 16px; font: 900 46px/1 Georgia,"Times New Roman",serif; }
.nxp5-btn { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border-radius: 999px; background: #2a1f1a; color: #faf6f0; font-weight: 600; font-size: 15px; text-decoration: none; }
.nxp5-btn:hover { background: #a24832; }
.nxp5-note { margin: 10px 0 0; color: #8a7f73; font-size: 12.5px; }
@media (max-width: 600px) { .nxp5 { grid-template-columns: 1fr; } }
</style>

Plan Rows

HTML + CSS · self-contained33 lines

<div class="nxp6" role="radiogroup" aria-label="Choose a plan">
  <label class="nxp6-row">
    <input type="radio" name="nxp6-plan">
    <span class="nxp6-name"><b>Hobby</b><small>For side projects</small></span>
    <span class="nxp6-price">$5<small>/mo</small></span>
  </label>
  <label class="nxp6-row">
    <input type="radio" name="nxp6-plan" checked>
    <span class="nxp6-name"><b>Business</b><small>For small companies</small></span>
    <span class="nxp6-price">$20<small>/mo</small></span>
  </label>
  <label class="nxp6-row">
    <input type="radio" name="nxp6-plan">
    <span class="nxp6-name"><b>Scale</b><small>For high traffic</small></span>
    <span class="nxp6-price">$80<small>/mo</small></span>
  </label>
  <button type="button" class="nxp6-btn">Continue</button>
</div>
<style>
.nxp6, .nxp6 * { box-sizing: border-box; }
.nxp6 { display: grid; gap: 10px; width: 100%; max-width: 440px; margin: 0 auto; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxp6-row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border: 1.5px solid #ece4d8; border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .2s, background .2s; }
.nxp6-row:hover { border-color: #d4c5a9; }
.nxp6-row:has(input:checked) { border-color: #a24832; background: #fdf6f2; }
.nxp6-row input { flex-shrink: 0; width: 20px; height: 20px; margin: 0; accent-color: #a24832; }
.nxp6-name { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.nxp6-name b { font-size: 15.5px; }
.nxp6-name small { color: #6d645a; font-size: 13px; }
.nxp6-price { font-size: 20px; font-weight: 800; white-space: nowrap; }
.nxp6-price small { font-size: 13px; font-weight: 400; color: #6d645a; }
.nxp6-btn { min-height: 48px; margin-top: 4px; border: 0; border-radius: 999px; background: #2a1f1a; color: #faf6f0; font: 600 15px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; cursor: pointer; }
.nxp6-btn:hover { background: #a24832; }
</style>

Class names carry a unique prefix, so several snippets can sit on one page without clashing. Colours and fonts are plain CSS values — change them to match your brand.

Ad Slot — Mid Content (Responsive In-Article)

💡

What Is This?

Gallery of pricing table and card designs
Includes comparison tables and tiered pricing cards
Monthly/annual toggle layouts available
Feature checklists and highlighted plans
Copy and customize for any SaaS or service site

🛠️

How to Use

Browse pricing table designs in the gallery
Preview each design with realistic plan content
Copy the HTML and CSS code
Replace plan names, prices, and features with your own
Customize highlighted plans and call-to-action buttons

🎯

Use Cases

Building SaaS and subscription pricing pages
Creating service comparison tables for business websites
Designing pricing sections for landing pages
Prototyping pricing options for client presentations
Learning CSS table and card layout techniques

Ad Slot — Bottom (300×250 Rectangle)

💰 Pricing Tables