Pricing Spotlight

<!-- Pricing Spotlight · Bron: Cult UI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="psl"><div class="psl-glow"></div><div class="psl-body"><span class="psl-tag">Pro</span><div class="psl-price">&euro;49<small>/mnd</small></div><ul class="psl-feat"><li>Onbeperkte projecten</li><li>Prioriteit support</li><li>Custom domein</li></ul><button class="psl-cta">Kies Pro</button></div></div>
</div>

/* Pricing Spotlight · Bron: Cult UI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.psl{position:relative;width:300px;border-radius:18px;padding:1px;background:rgba(10,10,10,.12);overflow:hidden;font-family:'Switzer',sans-serif}
.psl-glow{position:absolute;width:240px;height:240px;left:var(--x,50%);top:var(--y,0);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(245,72,15,.35),transparent 65%);opacity:0;transition:opacity .3s;pointer-events:none}
.psl:hover .psl-glow{opacity:1}
.psl-body{position:relative;background:#fff;border-radius:17px;padding:24px}
.psl-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#F5480F;background:rgba(245,72,15,.1);padding:4px 10px;border-radius:99px}
.psl-price{font-size:40px;font-weight:800;color:#0a0a0a;margin:14px 0 4px}.psl-price small{font-size:14px;font-weight:600;color:rgba(10,10,10,.5)}
.psl-feat{list-style:none;margin:14px 0 18px;padding:0;font-size:13px;color:rgba(10,10,10,.7)}
.psl-feat li{padding:6px 0 6px 22px;position:relative}.psl-feat li::before{content:'';position:absolute;left:0;top:11px;width:12px;height:12px;border-radius:50%;background:rgba(245,72,15,.15);box-shadow:inset 0 0 0 2px #F5480F}
.psl-cta{width:100%;padding:11px;border:0;border-radius:11px;background:#0a0a0a;color:#fff;font-weight:600;font-size:14px;cursor:pointer;transition:transform .2s}.psl-cta:hover{transform:translateY(-2px)}

// Pricing Spotlight · Bron: Cult UI · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.psl')||root;root.addEventListener('pointermove',function(e){var r=root.getBoundingClientRect();root.style.setProperty('--x',(e.clientX-r.left)+'px');root.style.setProperty('--y',(e.clientY-r.top)+'px');});
}
init(document.querySelector('.jouw-container'));