Prijzen in 3 pakketten

<!-- Prijzen in 3 pakketten · NedDev · eigen werk. -->
<div class="jouw-container">
<section class="pr3">
  <div class="pr3__inner">
    <header class="pr3__head">
      <span class="pr3__eyebrow">/ transparant, altijd</span>
      <h2 class="pr3__h2">Kies je startpunt.</h2>
      <div class="pr3__toggle" role="group" aria-label="Facturatieperiode">
        <button class="pr3__tg is-on" data-cycle="mo">Maandelijks</button>
        <button class="pr3__tg" data-cycle="yr">Jaarlijks <span>−20%</span></button>
      </div>
    </header>
    <div class="pr3__grid">
      <article class="pr3__plan"><h3>Start</h3><p class="pr3__desc">Voor een scherpe landingspagina.</p><div class="pr3__price"><span class="pr3__cur">€</span><span class="pr3__amt" data-mo="950" data-yr="760">950</span><span class="pr3__per">/mnd</span></div><ul><li>1 pagina, maatwerk</li><li>SEO-basis</li><li>Hosting & SSL</li></ul><a href="#" class="pr3__btn">Kies Start</a></article>
      <article class="pr3__plan pr3__plan--feat"><span class="pr3__badge">Populair</span><h3>Groei</h3><p class="pr3__desc">De complete bedrijfssite.</p><div class="pr3__price"><span class="pr3__cur">€</span><span class="pr3__amt" data-mo="2450" data-yr="1960">2450</span><span class="pr3__per">/mnd</span></div><ul><li>Tot 10 pagina's</li><li>Volledige SEO + content</li><li>Monitoring & support</li><li>Maandelijkse rapportage</li></ul><a href="#" class="pr3__btn pr3__btn--solid">Kies Groei</a></article>
      <article class="pr3__plan"><h3>Schaal</h3><p class="pr3__desc">Platform of webshop op maat.</p><div class="pr3__price"><span class="pr3__cur">€</span><span class="pr3__amt" data-mo="4900" data-yr="3920">4900</span><span class="pr3__per">/mnd</span></div><ul><li>Onbeperkt + app/SaaS</li><li>Integraties & automation</li><li>Dedicated team</li></ul><a href="#" class="pr3__btn">Plan gesprek</a></article>
    </div>
  </div>
</section>
</div>

/* Prijzen in 3 pakketten · NedDev · eigen werk. */
.pr3{width:100%;box-sizing:border-box;background:#f4f3f1;color:#0a0a0a;border-bottom:1px solid rgba(10,10,10,.12)}
.pr3__inner{max-width:900px;margin:0 auto;padding:44px 28px;box-sizing:border-box}
.pr3__head{text-align:center;margin-bottom:30px}
.pr3__eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:#F5480F}
.pr3__h2{font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:clamp(28px,4vw,42px);letter-spacing:-.02em;margin:12px 0 20px;line-height:1}
.pr3__toggle{display:inline-flex;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:3px;padding:4px}
.pr3__tg{font-family:'Switzer',sans-serif;font-weight:600;font-size:13px;border:0;background:transparent;color:#666;padding:8px 16px;border-radius:2px;cursor:pointer;transition:.2s}
.pr3__tg span{color:#F5480F;font-family:'JetBrains Mono',monospace;font-size:11px}
.pr3__tg.is-on{background:#0a0a0a;color:#fff}.pr3__tg.is-on span{color:#F5480F}
.pr3__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.pr3__plan{position:relative;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:6px;padding:26px 22px;box-sizing:border-box}
.pr3__plan--feat{border:1px solid #0a0a0a;box-shadow:0 20px 50px -28px rgba(10,10,10,.55);transform:translateY(-8px)}
.pr3__badge{position:absolute;top:-11px;left:22px;background:#F5480F;color:#0a0a0a;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;padding:4px 10px;border-radius:2px}
.pr3__plan h3{font-family:'Switzer',sans-serif;font-weight:600;font-size:18px;margin:0 0 4px}
.pr3__desc{font-family:'Switzer',sans-serif;font-size:13px;color:#777;margin:0 0 16px;min-height:34px}
.pr3__price{display:flex;align-items:baseline;gap:2px;margin-bottom:18px}
.pr3__cur{font-family:'Switzer',sans-serif;font-size:18px;color:#0a0a0a}
.pr3__amt{font-family:'Boldonse',sans-serif;font-size:40px;letter-spacing:-.02em;line-height:1}
.pr3__per{font-family:'JetBrains Mono',monospace;font-size:11px;color:#999;margin-left:4px}
.pr3__plan ul{list-style:none;margin:0 0 22px;padding:0}
.pr3__plan li{font-family:'Switzer',sans-serif;font-size:13.5px;color:#444;padding:7px 0 7px 22px;position:relative;border-top:1px solid rgba(10,10,10,.06)}
.pr3__plan li:before{content:'+';position:absolute;left:0;color:#F5480F;font-family:'JetBrains Mono',monospace}
.pr3__btn{display:block;text-align:center;font-family:'Switzer',sans-serif;font-weight:600;font-size:14px;padding:12px;border-radius:2px;text-decoration:none;border:1px solid #0a0a0a;color:#0a0a0a;transition:.25s}
.pr3__btn:hover{background:#f4f3f1}
.pr3__btn--solid{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.pr3__btn--solid:hover{background:#F5480F;border-color:#F5480F;color:#0a0a0a}
@media(max-width:720px){.pr3__grid{grid-template-columns:1fr}.pr3__plan--feat{transform:none}}

// Prijzen in 3 pakketten · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.pr3')||root;
var tgs=[].slice.call(root.querySelectorAll('.pr3__tg'));
var amts=[].slice.call(root.querySelectorAll('.pr3__amt'));
tgs.forEach(function(b){b.addEventListener('click',function(){tgs.forEach(function(x){x.classList.remove('is-on');});b.classList.add('is-on');var c=b.dataset.cycle;amts.forEach(function(a){a.textContent=(c==='yr'?a.dataset.yr:a.dataset.mo);});});});
}
init(document.querySelector('.jouw-container'));