Section
SaaS Pricing
3-tier SaaS pricing with monthly/yearly toggle.
- Section
- Vanilla
- HTML
- MIT
Preview
Live section
No interactive preview for this section.
Install it with the CLI below, or read the implementation on this page.
Install
Add to your project
npx devsnips add Vanilla/Sections/Pricing/pricing-saas Vanilla/Sections/Pricing/pricing-saas <!-- Snippet Name: SaaS Pricing | Family: Pricing | Description: 3-tier SaaS pricing with monthly/yearly toggle. | Author: DevSnips Contributors | Usage: Copy the .nb section into your page. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SaaS Pricing | DevSnips</title>
<meta name="description" content="Neo-brutalist vanilla HTML/CSS/JS section: pricing-saas. Copy, customize, ship.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style> /* ---- Neo-Brutalist design tokens ---- */
:root{
--bg:#fbfbf9; --surface:#ffffff; --foreground:#0a0a0a; --muted:#525252;
--border:#0a0a0a; --primary:#4f46e5; --primary-fg:#ffffff;
--accent:#facc15; --pink:#ec4899; --lime:#a3e635; --cyan:#22d3ee;
--radius:6px; --radius-lg:10px;
--shadow:4px 4px 0 var(--border); --shadow-lg:8px 8px 0 var(--border);
--ring:0 0 0 3px #fff, 0 0 0 6px var(--primary);
--container:1200px; --gutter:20px;
--fs-h1:clamp(2.4rem,6vw,4.25rem); --fs-h2:clamp(1.9rem,4vw,2.9rem);
--fs-h3:clamp(1.25rem,2.4vw,1.6rem); --fs-lead:clamp(1.05rem,2vw,1.25rem);
--ff:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
:root{ --bg:#0a0a0a; --surface:#151515; --foreground:#fafafa; --muted:#a3a3a3;
--border:#fafafa; --ring:0 0 0 3px #000, 0 0 0 6px var(--primary); }
}
/* ---- base layout + components ---- */
*{box-sizing:border-box}
.nb{font-family:var(--ff);background:var(--bg);color:var(--foreground);
line-height:1.6;-webkit-font-smoothing:antialiased;margin:0}
.nb .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.nb section{position:relative;padding-block:clamp(56px,9vw,120px)}
.nb h1,.nb h2,.nb h3,.nb h4{font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0}
.nb h1{font-size:var(--fs-h1)} .nb h2{font-size:var(--fs-h2)} .nb h3{font-size:var(--fs-h3)}
.nb p{margin:0} .nb a{color:inherit}
.nb .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;
font-weight:700;text-transform:uppercase;letter-spacing:.14em;
border:2px solid var(--border);background:var(--surface);padding:6px 12px;
border-radius:999px;box-shadow:var(--shadow)}
.nb .lead{font-size:var(--fs-lead);color:var(--muted);max-width:62ch}
.nb .muted{color:var(--muted)}
.nb .center{text-align:center;margin-inline:auto}
.nb .grid{display:grid;gap:var(--gutter)}
.nb .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
font:inherit;font-weight:700;font-size:.98rem;line-height:1;cursor:pointer;
text-decoration:none;border:3px solid var(--border);border-radius:var(--radius);
padding:14px 22px;background:var(--primary);color:var(--primary-fg);
box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease,background .12s}
.nb .btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
.nb .btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border)}
.nb .btn.outline{background:var(--surface);color:var(--foreground)}
.nb .btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.nb .btn.ghost:hover{box-shadow:var(--shadow);border-color:var(--border);transform:translate(-2px,-2px)}
.nb .btn.accent{background:var(--accent);color:#0a0a0a}
.nb .card{background:var(--surface);border:3px solid var(--border);border-radius:var(--radius);
box-shadow:var(--shadow);padding:24px;transition:transform .14s ease,box-shadow .14s ease}
.nb .card.hover:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-lg)}
.nb .badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--border);
padding:4px 10px;border-radius:999px;background:var(--surface)}
.nb :focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
.nb .skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#000;
padding:10px 16px;border:2px solid var(--border);z-index:50;font-weight:700}
.nb .skip:focus{left:8px}
.nb .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
@media (prefers-reduced-motion:reduce){
.nb *,.nb *::before,.nb *::after{animation-duration:.001ms!important;
transition-duration:.001ms!important;animation-iteration-count:1!important}
}
.psaas .head{text-align:center;margin-bottom:24px}.psaas .head h2{margin:12px 0 8px}
.psaas .toggle{display:inline-flex;border:3px solid var(--border);border-radius:999px;background:var(--surface);box-shadow:var(--shadow);padding:4px;margin:0 auto 30px}
.psaas .toggle button{font:inherit;font-weight:700;border:0;background:none;padding:9px 18px;border-radius:999px;cursor:pointer;color:var(--muted)}
.psaas .toggle button[aria-pressed="true"]{background:var(--primary);color:#fff}
.psaas .toggle .save{font-size:.7rem;background:var(--accent);border:2px solid var(--border);border-radius:999px;padding:1px 6px;margin-left:6px}
.psaas .grid{grid-template-columns:1fr;gap:16px}
.psaas .plan{position:relative;border:3px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow);padding:26px;display:flex;flex-direction:column;gap:12px}
.psaas .plan.feat{box-shadow:var(--shadow-lg);transform:translate(-2px,-2px)}
.psaas .plan .rib{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--accent);border:3px solid var(--border);padding:4px 12px;border-radius:999px;font-size:.72rem;font-weight:800;text-transform:uppercase}
.psaas .plan h3{font-size:1.1rem}.psaas .plan .price{font-size:2.4rem;font-weight:900}.psaas .plan .price small{font-size:.9rem;font-weight:600;color:var(--muted)}
.psaas .plan ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.psaas .plan li{display:flex;gap:8px}.psaas .plan .ic{width:18px;height:18px;border-radius:50%;background:var(--lime);border:2px solid var(--border);display:grid;place-items:center;flex:none;color:#0a0a0a}
@media(min-width:900px){.psaas .grid{grid-template-columns:repeat(3,1fr);align-items:start}}</style>
</head>
<body class="nb">
<a class="skip" href="#main">Skip to content</a>
<section class="psaas" aria-labelledby="psaas-title">
<div class="container">
<div class="head"><span class="eyebrow">SaaS pricing</span><h2 id="psaas-title">Plans that scale with you.</h2></div>
<div class="toggle" role="group" aria-label="Billing period">
<button type="button" aria-pressed="true" data-bill="monthly">Monthly</button>
<button type="button" aria-pressed="false" data-bill="yearly">Yearly <span class="save">-20%</span></button>
</div>
<div class="grid">
<article class="plan"><h3>Starter</h3><p class="price"><span data-price-monthly="$12" data-price-yearly="$10">$12</span><small>/mo</small></p><p class="muted">For small teams getting started.</p><ul><li><span class="ic">✓</span>5 seats</li><li><span class="ic">✓</span>10 projects</li><li><span class="ic">✓</span>Email support</li></ul><a class="btn outline" href="#">Start free</a></article>
<article class="plan feat"><span class="rib">Popular</span><h3>Growth</h3><p class="price"><span data-price-monthly="$39" data-price-yearly="$31">$39</span><small>/mo</small></p><p class="muted">For scaling product teams.</p><ul><li><span class="ic">✓</span>Unlimited seats</li><li><span class="ic">✓</span>SSO add-on</li><li><span class="ic">✓</span>Priority support</li><li><span class="ic">✓</span>Audit logs</li></ul><a class="btn" href="#">Choose Growth</a></article>
<article class="plan"><h3>Scale</h3><p class="price"><span data-price-monthly="$99" data-price-yearly="$79">$99</span><small>/mo</small></p><p class="muted">For larger orgs.</p><ul><li><span class="ic">✓</span>SAML SSO</li><li><span class="ic">✓</span>Dedicated CSM</li><li><span class="ic">✓</span>99.99% SLA</li></ul><a class="btn outline" href="#">Contact sales</a></article>
</div>
</div>
</section>
<script>
(function(){
var sec=document.querySelector('.psaas');if(!sec)return;
var btns=[].slice.call(sec.querySelectorAll('[data-bill]'));
var prices=[].slice.call(sec.querySelectorAll('[data-price-monthly]'));
btns.forEach(function(b){
b.addEventListener('click',function(){
var mode=b.dataset.bill;
btns.forEach(function(o){o.setAttribute('aria-pressed',String(o===b))});
prices.forEach(function(p){p.textContent=p.getAttribute('data-price-'+mode)});
});
});
})();</script>
</body>
</html># SaaS Pricing
3-tier SaaS pricing with monthly/yearly toggle.
**Technology:** Vanilla HTML/CSS/JS
**Category:** sections / pricing
**Design:** Neo-Brutalist (flat colors, hard shadows, bold borders)
**Responsive:** Mobile-first (320px → 1920px)
**Dark mode:** via `prefers-color-scheme`
**Tags:** pricing, saas, toggle
**Features:** accessible toggle, aria-pressed, responsive
## Usage
1. Copy the contents of `code.html` into your page.
2. The section is self-contained (inline CSS + JS). No build step.
3. Tweak the CSS variables in `:root` to rebrand. 119 lines UTF-8 · LF · Spaces: 2
Continue browsing