Табы с индикатором

Белая пилюля доезжает до активной вкладки пружиной с лёгким перелётом.

Щёлкайте вкладки.

Контент вкладки «Дизайн» — заглушка. Индикатор доехал сюда пружиной.

Код

<div class="tabs">
  <span class="ind"></span>
  <button class="on">Один</button>
  <button>Два</button>
  <button>Три</button>
</div>

<style>
.tabs { position: relative; display: flex; gap: 4px;
  background: #181c24; border-radius: 999px; padding: 5px; }
.tabs button { position: relative; z-index: 2; background: none;
  border: none; border-radius: 999px; padding: 11px 22px;
  color: #8b94a1; transition: color .3s; }
.tabs button.on { color: #101318; }
.ind { position: absolute; top: 5px; bottom: 5px; z-index: 1;
  background: #eef1f6; border-radius: 999px;
  transition: left .45s cubic-bezier(.34,1.4,.44,1),
              width .45s cubic-bezier(.34,1.4,.44,1); }  /* пружина */
</style>

<script>
var wrap = document.querySelector(".tabs");
var ind = wrap.querySelector(".ind");
function move(btn) {
  ind.style.left = btn.offsetLeft + "px";
  ind.style.width = btn.offsetWidth + "px";
}
move(wrap.querySelector(".on"));
wrap.querySelectorAll("button").forEach(function (b) {
  b.addEventListener("click", function () {
    wrap.querySelector(".on").classList.remove("on");
    b.classList.add("on");
    move(b);
  });
});
</script>

Промпт для ИИ

Сделай табы с ездящим индикатором: контейнер-пилюля с кнопками, под ними absolute-индикатор (top/bottom 5px, скруглённый); по клику JS ставит индикатору left = offsetLeft и width = offsetWidth активной кнопки; transition 0.45s по пружинной кривой cubic-bezier(0.34,1.4,0.44,1) — индикатор доезжает с лёгким перелётом. Активная кнопка меняет цвет текста под индикатор. Пересчитывать позицию на resize.