Sliding Indicator Tabs

<div class="tb"><p class="k">Pill</p><div class="tl" data-p="Overview|High-level summary.|Activity|Recent events and updates.|Settings|Preferences and access."><div class="sc"><i class="ind"></i><button class="t on">Overview</button><button class="t">Activity</button><button class="t">Settings</button></div></div><p class="note">High-level summary.</p><p class="k">Overflow</p><div class="tl ov"><div class="sc"><i class="ind"></i><button class="t on">Overview</button><button class="t">Activity</button><button class="t">Analytics</button><button class="t">Members</button><button class="t">Billing</button></div><button class="nx" aria-label="Scroll"><svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg></button></div><p class="k">Segment</p><div class="tl sg"><div class="sc"><i class="ind"></i><button class="t on">Day</button><button class="t">Week</button><button class="t">Month</button></div></div><p class="k">Icon on selected</p><div class="tl ic"><div class="sc"><i class="ind"></i><button class="t on"><svg viewBox="0 0 24 24"><path d="M4 11l8-7 8 7v9H4z"/></svg>Home</button><button class="t"><svg viewBox="0 0 24 24"><path d="M5 19V9M12 19V5M19 19v-7"/></svg>Stats</button><button class="t"><svg viewBox="0 0 24 24"><path d="M6 17V11a6 6 0 0112 0v6l2 2H4z"/></svg>Alerts</button></div></div></div>

.tb{width:320px;font-family:system-ui,-apple-system,sans-serif;color:#e5e5e5;display:grid;gap:7px}.k{margin:8px 0 0;font:700 10px/1 inherit;letter-spacing:.08em;text-transform:uppercase;color:#7a7a7a}.note{margin:0 0 2px;font-size:13px;color:#8a8a8a}.tl{position:relative;display:inline-flex;max-width:100%;border-radius:999px;background:#1d1d1d;padding:3px}.tl.sg{border-radius:10px}.tl.sg .ind{border-radius:8px}.tl.ov{width:236px;overflow:hidden}.sc{position:relative;display:flex;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}.sc::-webkit-scrollbar{display:none}.ind{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:999px;background:#0a84ff;transition:transform .4s cubic-bezier(.3,1.1,.4,1),width .4s cubic-bezier(.3,1.1,.4,1)}.t{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:#8f8f8f;font:600 13px/1 inherit;padding:10px 16px;cursor:pointer;transition:color .25s}.t:hover{color:#ddd}.t.on{color:#fff}.t svg{width:0;opacity:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-right:-6px;transition:width .3s,opacity .3s,margin .3s}.t.on svg{width:14px;opacity:1;margin-right:0}.nx{position:absolute;right:0;top:0;bottom:0;width:34px;border:0;color:#fff;cursor:pointer;background:linear-gradient(90deg,transparent,#1d1d1d 55%);border-radius:0 999px 999px 0;display:grid;place-items:center}.nx svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

(function(){function mk(g){var sc=g.querySelector('.sc'),ind=g.querySelector('.ind'),bs=sc.querySelectorAll('.t');function pos(){var a=sc.querySelector('.t.on');if(!a||!a.offsetWidth)return;ind.style.width=a.offsetWidth+'px';ind.style.transform='translateX('+a.offsetLeft+'px)'}bs.forEach(function(b){b.onclick=function(){bs.forEach(function(x){x.classList.toggle('on',x===b)});pos();if(g.dataset.p){var a=g.dataset.p.split('|');for(var i=0;i<a.length;i+=2){if(a[i]===b.textContent){document.querySelector('.note').textContent=a[i+1]}}}b.scrollIntoView({inline:'nearest',block:'nearest'})}});var nx=g.querySelector('.nx');if(nx){nx.onclick=function(){sc.scrollBy({left:110})}}pos();if(window.ResizeObserver)new ResizeObserver(pos).observe(g);setTimeout(pos,120);setTimeout(pos,500)}document.querySelectorAll('.tl').forEach(mk)})();