Блок вкладок (табов) для taplink

Пример админки: https://tap.one-way.dev/p/c91b9c/

Пример готового решения: https://tap.one-way.dev/p/c7b2cc/

Видео:

Код помощник, создающий админку:

<script src="https://onthewaytothesun.ru/projects/web/taplink/tabshelper.min.js?v1"></script>
<link href="https://onthewaytothesun.ru/projects/web/taplink/tabshelper.css" rel="stylesheet">

Код стилизации

<style>:root {  --primary-color: #185ee0;/*Цвет текста выделенного элемента*/  --secondary-color: #e6eef9;/*Цвет фона выделенного элемента*/  --tab-background:#fff;/*Фоновый цвет вкладок*/  --tab-margin:30px;/*Отступ от вкладок до контента*/  --tab-padding:12px; /*Внешний отступ вкладок*/}.tab-container {  width:100%;max-width: 820px;  margin:auto;}.tabs {  display: flex;  position: relative;  background-color: var(--tab-background);  box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15);  padding: var(--tab-padding);  border-radius: 99px;  color:#222;  justify-content:space-between;  margin:var(--tab-margin) 0;}.tabs * {  z-index: 2;}input[type=radio] {  display: none;}.tab {  display: flex;  align-items: center;  justify-content: center;  height: 54px;  font-size: 1.25rem;  font-weight: 500;  border-radius: 99px;  cursor: pointer;  transition: color 0.15s ease-in;}input[type=radio]:checked + label {  color: var(--primary-color);}input:nth-child(1):checked ~ .glider {  transform: translateX(0);}input:nth-child(3):checked ~ .glider {  transform: translateX(100%);}input:nth-child(5):checked ~ .glider {  transform: translateX(200%);}input:nth-child(7):checked ~ .glider {  transform: translateX(300%);}.glider {  position: absolute;  display: flex;  height: 100%;  width: 34%;  height:54px;  background-color: var(--secondary-color);  z-index: 1;  border-radius: 99px;  transition: 0.25s ease-out;  left:var(--tab-padding);}.tabs[data-tabs="1"] .glider {  width:calc(100% - (var(--tab-padding))*2);}.tabs[data-tabs="2"] .glider {  width:calc(50% - var(--tab-padding));}.tabs[data-tabs="3"] .glider {  width:calc(33.33% - (var(--tab-padding))/1.5);}.tabs[data-tabs="4"] .glider {  width:calc(25% - (var(--tab-padding))/2);}@media (max-width:820px) {  .tabs {    margin-left: 1rem;    margin-right: 1rem;    min-height:42px;    align-items:center;  }  .tab {    height:20px;  }  .glider {    height:34px;    top:4px;  }  :root {    --tab-padding:8px;  }}</style>