Tabs with Sliding Indicator

<div class="st">
  <div class="st-bar" id="bar">
    <button class="st-tab on">Overview</button>
    <button class="st-tab">Pricing</button>
    <button class="st-tab">Reviews</button>
    <span class="st-pill" id="pill"></span>
  </div>
  <div class="st-panel on">A quick overview of the product and what it does best.</div>
  <div class="st-panel">Simple, transparent pricing that scales with your team.</div>
  <div class="st-panel">Loved by thousands of developers around the world.</div>
</div>

*{box-sizing:border-box}
.st{width:380px;max-width:100%;font-family:system-ui,sans-serif}
.st-bar{position:relative;display:flex;background:#eef0f6;border-radius:12px;padding:5px}
.st-tab{flex:1;position:relative;z-index:1;border:0;background:0;padding:11px;font-weight:600;color:#5a627a;cursor:pointer;border-radius:9px;transition:color .25s}
.st-tab.on{color:#1a1f36}
.st-pill{position:absolute;top:5px;bottom:5px;border-radius:9px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:left .3s cubic-bezier(.5,0,.2,1),width .3s cubic-bezier(.5,0,.2,1);z-index:0}
.st-panel{display:none;padding:20px 4px;color:#46506b;line-height:1.6;animation:f .3s ease}
.st-panel.on{display:block}
@keyframes f{from{opacity:0}}

var bar=document.getElementById('bar'),pill=document.getElementById('pill'),tabs=bar.querySelectorAll('.st-tab'),panels=document.querySelectorAll('.st-panel');
function move(t){pill.style.left=t.offsetLeft+'px';pill.style.width=t.offsetWidth+'px';}
tabs.forEach(function(t,i){t.onclick=function(){tabs.forEach(function(x){x.classList.remove('on')});panels.forEach(function(p){p.classList.remove('on')});t.classList.add('on');panels[i].classList.add('on');move(t);};});
setTimeout(function(){move(tabs[0])},50);