Блок с ценами на услуги салона красоты

<section class="vbtsu">
  <div class="vbtsu-wrap">
    <div class="vbtsu-head">
      <h2 class="vbtsu-h2">Цены</h2>
      <p class="vbtsu-lead">Стоимость окончательная: снятие, форма и уход уже внутри. Доплат на кассе не бывает.</p>
    </div>

    <div class="vbtsu-tabs" id="vbtsu-tabs" role="tablist" aria-label="Категории услуг"></div>
    <div class="vbtsu-list" id="vbtsu-list"></div>
  </div>
</section>

<style>
.vbtsu, .vbtsu *, .vbtsu *::before, .vbtsu *::after { box-sizing: border-box; }
.vbtsu {
  --acc: #b9705f; --acc-dark: #a25e4e; --ink: #33272a; --muted: #7a6a6c; --line: #ece1dd; --soft: #faf3f1;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: #fff; color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbtsu-wrap { max-width: 1000px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbtsu-head { margin-bottom: clamp(22px, 2.6vw, 34px); }
.vbtsu-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; }
.vbtsu-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 40em; }

.vbtsu-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.vbtsu-tab { border: 1.5px solid var(--line); margin: 0; -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer;
  background: #fff !important; color: var(--muted) !important; border-radius: 999px; padding: 10px 20px; font-size: 15px; transition: .18s ease; }
.vbtsu-tab:hover { border-color: var(--acc); color: var(--ink) !important; }
.vbtsu-tab[aria-selected="true"] { background: var(--acc) !important; border-color: var(--acc); color: #fff !important; }

.vbtsu-list { border-top: 1px solid var(--line); }
.vbtsu-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px;
  padding: 17px 0; border-bottom: 1px solid var(--line); }
.vbtsu-row__n { font-size: 16px; font-weight: 500; }
.vbtsu-row__d { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.vbtsu-row__p { font-family: var(--fh); font-size: 18px; font-weight: 700; white-space: nowrap; }
.vbtsu-row__b, .vbtsu-row__b:link, .vbtsu-row__b:visited, .vbtsu-row__b:active, .vbtsu-row__b:focus {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  background: var(--soft); color: var(--acc) !important; text-decoration: none !important; transition: .18s ease; }
.vbtsu-row__b:hover { background: var(--acc); color: #fff !important; }

@media (max-width: 620px) {
  .vbtsu-row { grid-template-columns: minmax(0, 1fr) auto; }
  .vbtsu-row__b { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .vbtsu * { transition: none !important; } }
</style>

<script>
(function () {
  var CTA_HREF = '#zapis';   /* куда ведут кнопки записи: якорь или ссылка */

  /* ── ПРАЙС: категория → список услуг ── */
  var PRICE = {
    'Ногти': [
      { n: 'Маникюр с покрытием гель-лаком', d: 'снятие, форма, уход в цене · 90 мин', p: '2 800 ₽' },
      { n: 'Маникюр без покрытия',           d: 'обработка и питание · 50 мин',        p: '1 600 ₽' },
      { n: 'Педикюр с покрытием',            d: 'аппаратный, с обработкой стоп · 110 мин', p: '3 600 ₽' },
      { n: 'Укрепление и восстановление',    d: 'база под нагрузку · 30 мин',          p: '+700 ₽' },
      { n: 'Дизайн от простого к сложному',  d: 'за 2 ногтя',                          p: 'от 300 ₽' }
    ],
    'Волосы': [
      { n: 'Женская стрижка и укладка', d: 'консультация по форме · 90 мин', p: 'от 3 200 ₽' },
      { n: 'Окрашивание в один тон',    d: 'краситель включён · 120 мин',    p: 'от 4 800 ₽' },
      { n: 'Сложное окрашивание',       d: 'аир-тач, шатуш · от 4 часов',    p: 'от 9 500 ₽' },
      { n: 'Уход по длине',             d: 'реконструкция · 40 мин',         p: '2 400 ₽' },
      { n: 'Мужская стрижка',           d: 'машинка и ножницы · 45 мин',     p: '1 800 ₽' }
    ],
    'Брови и ресницы': [
      { n: 'Коррекция бровей',      d: 'форма по типу лица · 40 мин',   p: '1 200 ₽' },
      { n: 'Окрашивание бровей',    d: 'краска или хна · 30 мин',       p: '1 100 ₽' },
      { n: 'Ламинирование бровей',  d: 'с уходом · 60 мин',             p: '2 900 ₽' },
      { n: 'Наращивание ресниц',    d: 'классика или объём · 150 мин',  p: 'от 3 400 ₽' },
      { n: 'Снятие ресниц',         d: 'бережное, с уходом · 25 мин',   p: '700 ₽' }
    ],
    'Лицо': [
      { n: 'Комбинированная чистка', d: 'ультразвук и механика · 90 мин', p: '4 200 ₽' },
      { n: 'Пилинг по показаниям',   d: 'подбор на консультации · 50 мин', p: 'от 3 800 ₽' },
      { n: 'Уходовая процедура',     d: 'маска и массаж · 70 мин',        p: '3 300 ₽' },
      { n: 'Массаж лица',            d: 'лимфодренаж · 45 мин',           p: '2 600 ₽' },
      { n: 'Консультация косметолога', d: 'разбор ухода · 30 мин',        p: 'бесплатно' }
    ]
  };

  var roots = document.querySelectorAll('.vbtsu');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var tabsBox = root.querySelector('#vbtsu-tabs'), listBox = root.querySelector('#vbtsu-list');
    var keys = Object.keys(PRICE), current = keys[0];

    keys.forEach(function (k) {
      var b = document.createElement('button');
      b.type = 'button'; b.className = 'vbtsu-tab'; b.setAttribute('role', 'tab');
      b.setAttribute('aria-selected', k === current ? 'true' : 'false');
      b.textContent = k;
      b.addEventListener('click', function () {
        current = k;
        tabsBox.querySelectorAll('.vbtsu-tab').forEach(function (x) { x.setAttribute('aria-selected', 'false'); });
        b.setAttribute('aria-selected', 'true');
        draw();
      });
      tabsBox.appendChild(b);
    });

    function draw() {
      listBox.innerHTML = PRICE[current].map(function (r) {
        return '<div class="vbtsu-row"><div><span class="vbtsu-row__n">' + r.n + '<\/span>' +
          '<span class="vbtsu-row__d">' + r.d + '<\/span><\/div>' +
          '<span class="vbtsu-row__p">' + r.p + '<\/span>' +
          '<a class="vbtsu-row__b" href="' + CTA_HREF + '">Записаться<\/a><\/div>';
      }).join('');
    }
    draw();
  }
})();
</script>

Вставляется целиком в блок T123 «HTML-код». Внутри уже есть стили и скрипт, подключать ничего не нужно.