Tabs met schuivende markering

<!-- Tabs met schuivende markering · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-stb"><div class="ei-stb__l" role="tablist" aria-label="Weergave"><span class="ei-stb__i" aria-hidden="true"></span><button class="ei-stb__t" role="tab" aria-selected="true" type="button">Overzicht</button><button class="ei-stb__t" role="tab" aria-selected="false" tabindex="-1" type="button">Facturen</button><button class="ei-stb__t" role="tab" aria-selected="false" tabindex="-1" type="button">Instellingen</button></div><div class="ei-stb__p"><p class="is-on">3 lopende projecten, laatste update vandaag 09:14.</p><p>2 openstaande facturen, totaal € 1.840,00.</p><p>Meldingen per e-mail aan, tweestapsverificatie actief.</p></div></div>
</div>

/* Tabs met schuivende markering · NedDev · eigen werk. */
.ei-stb{width:86%;max-width:340px;display:flex;flex-direction:column;gap:14px}
.ei-stb__l{position:relative;display:flex;padding:4px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:999px}
.ei-stb__i{position:absolute;top:4px;bottom:4px;left:0;width:0;background:#0a0a0a;border-radius:999px;transition:transform .45s cubic-bezier(.6,0,.2,1),width .45s cubic-bezier(.6,0,.2,1)}
.ei-stb__t{position:relative;flex:1;border:0;background:none;padding:9px 10px;font-family:'Switzer',sans-serif;font-weight:600;font-size:13px;color:rgba(10,10,10,.65);cursor:pointer;border-radius:999px;transition:color .3s;white-space:nowrap}
.ei-stb__t[aria-selected="true"]{color:#fff}
.ei-stb__t:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.ei-stb__p{position:relative;min-height:44px}
.ei-stb__p p{position:absolute;inset:0;margin:0;padding:0 6px;font-family:'Switzer',sans-serif;font-size:14px;line-height:1.45;color:#0a0a0a;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.ei-stb__p p.is-on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.ei-stb__i,.ei-stb__p p{transition:none}}

// Tabs met schuivende markering · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ei-stb'),ts=[].slice.call(w.querySelectorAll('.ei-stb__t')),ind=w.querySelector('.ei-stb__i'),ps=[].slice.call(w.querySelectorAll('.ei-stb__p p')),cur=0;
function sel(n,focus){cur=n;ts.forEach(function(t,k){t.setAttribute('aria-selected',k===n);t.tabIndex=k===n?0:-1;});ps.forEach(function(p,k){p.classList.toggle('is-on',k===n);});
  ind.style.width=ts[n].offsetWidth+'px';ind.style.transform='translateX('+ts[n].offsetLeft+'px)';if(focus)ts[n].focus();}
ts.forEach(function(t,k){t.addEventListener('click',function(){sel(k);});t.addEventListener('keydown',function(e){if(e.key==='ArrowRight'){e.preventDefault();sel((cur+1)%ts.length,true);}if(e.key==='ArrowLeft'){e.preventDefault();sel((cur+ts.length-1)%ts.length,true);}});});
sel(0);if(document.fonts&&document.fonts.ready)document.fonts.ready.then(function(){sel(cur);});window.addEventListener('resize',function(){sel(cur);});
}
init(document.querySelector('.jouw-container'));