Блок «Что входит в дизайн-проект» для Tilda

<section class="vbsdp">
  <div class="vbsdp-wrap">
    <div class="vbsdp-head">
      <h2 class="vbsdp-h2">Из чего собирается альбом проекта</h2>
      <p class="vbsdp-lead">Шесть этапов, каждый закрывается своим набором листов. Выберите этап слева, чтобы увидеть состав, объём и срок.</p>
    </div>

    <div class="vbsdp-grid">
      <div class="vbsdp-nav" id="vbsdp-nav" role="tablist" aria-label="Этапы дизайн-проекта"></div>
      <div class="vbsdp-panel" id="vbsdp-panel" aria-live="polite"></div>
    </div>

    <ul class="vbsdp-sum">
      <li><b>56</b><span>листов в альбоме для квартиры 64 м²</span></li>
      <li><b>6 недель</b><span>от замера до передачи альбома</span></li>
      <li><b>2 экземпляра</b><span>печатаем в переплёте, файлы отдаём отдельно</span></li>
    </ul>
  </div>
</section>

<style>
.vbsdp, .vbsdp *, .vbsdp *::before, .vbsdp *::after { box-sizing: border-box; }
.vbsdp {
  --acc: #9a7b53; --ink: #26231e; --muted: #7a736a; --line: #e6e0d6; --soft: #f7f4ef;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--soft); color: var(--ink); font-family: var(--f); padding: clamp(38px, 5.4vw, 88px) 20px;
}
.vbsdp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 36px); }
.vbsdp-head { max-width: 42em; margin-bottom: clamp(22px, 3vw, 36px); }
.vbsdp-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; margin: 0 0 12px; }
.vbsdp-lead { font-size: 16px; line-height: 1.62; color: var(--muted); margin: 0; }

.vbsdp-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(16px, 2.4vw, 28px); align-items: start; }
.vbsdp-nav { display: grid; gap: 6px; }
.vbsdp-tab { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 1px solid transparent; margin: 0; padding: 14px 16px; -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer;
  border-radius: 6px; background: none !important; color: var(--ink) !important; transition: background .18s ease, border-color .18s ease; }
.vbsdp-tab:hover { border-color: var(--line); }
.vbsdp-tab__n { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center;
  justify-content: center; font-size: 13px; color: var(--muted); }
.vbsdp-tab__t { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.vbsdp-tab__s { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.vbsdp-tab--on { background: #fff !important; border-color: var(--line); }
.vbsdp-tab--on .vbsdp-tab__n { background: var(--acc); border-color: var(--acc); color: #fff; }

.vbsdp-panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: clamp(22px, 2.8vw, 34px); min-height: 340px; }
.vbsdp-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.vbsdp-meta i { font-style: normal; font-size: 12.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; }
.vbsdp-h3 { font-family: var(--fh); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.2; font-weight: 600; margin: 0 0 12px; }
.vbsdp-txt { font-size: 15.5px; line-height: 1.65; color: var(--muted); margin: 0 0 20px; max-width: 38em; }
.vbsdp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 22px; }
.vbsdp-list li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.5; }
.vbsdp-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); opacity: .5; }

.vbsdp-sum { list-style: none; margin: clamp(20px, 2.6vw, 32px) 0 0; padding: 24px 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; }
.vbsdp-sum b { display: block; font-family: var(--fh); font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.vbsdp-sum span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-top: 6px; max-width: 18em; }

@media (max-width: 880px) { .vbsdp-grid { grid-template-columns: minmax(0, 1fr); } .vbsdp-panel { min-height: 0; } }
@media (max-width: 480px) { .vbsdp-tab { grid-template-columns: 30px minmax(0, 1fr); } .vbsdp-tab__s { grid-column: 2; } }
@media (prefers-reduced-motion: reduce) { .vbsdp * { transition: none !important; } }
</style>

<script>
(function () {
  var STAGES = [
    { t: 'Обмерный план', s: '2 листа', d: '2 дня',
      x: 'Приезжаем с лазерным дальномером и снимаем помещение целиком: стены, проёмы, высоты, стояки и вентиляционные короба. По этим замерам строится всё остальное, поэтому этап идёт первым и без него работа не начинается.',
      l: ['План с размерами по осям', 'Высоты потолка по точкам', 'Привязка стояков и коробов', 'Фотофиксация состояния'] },
    { t: 'Планировочные решения', s: '4 листа', d: '5 дней',
      x: 'Показываем три варианта расстановки: разные сценарии хранения, зонирования и расположения мокрых точек. Обсуждаем каждый, дальше собираем финальную планировку из того, что вам подошло.',
      l: ['Три варианта расстановки', 'Финальный план перегородок', 'План мебели с габаритами', 'Проходы и зоны хранения'] },
    { t: 'Визуализация интерьера', s: '8 видов', d: '10 дней',
      x: 'Собираем помещения в объёме и показываем интерьер с материалами, светом и мебелью. Правки вносим до тех пор, пока картинка не совпадёт с вашим представлением, и только после согласования переходим к чертежам.',
      l: ['Кухня и гостиная', 'Спальня и детская', 'Санузлы', 'Прихожая и коридор'] },
    { t: 'Рабочие чертежи', s: '24 листа', d: '12 дней',
      x: 'Комплект, по которому работает бригада: демонтаж, кладка, полы, потолки, электрика, вода и вентиляция. Каждый лист с размерами и привязками, чтобы прораб не звонил с вопросом, где вывести розетку.',
      l: ['План демонтажа и монтажа', 'Электрика и группы освещения', 'Водоснабжение и канализация', 'Потолки, полы, тёплый пол'] },
    { t: 'Развёртки и ведомости', s: '18 листов', d: '7 дней',
      x: 'Развёртки стен показывают раскладку плитки, панелей и декора по каждой стене. Ведомости переводят проект в список покупок: артикулы, объёмы и запас на подрезку посчитаны заранее.',
      l: ['Развёртки по всем стенам', 'Раскладка плитки со швами', 'Ведомость отделочных материалов', 'Ведомость дверей и мебели'] },
    { t: 'Комплектация', s: 'сопровождение', d: '3-5 недель',
      x: 'Подбираем поставщиков, проверяем сроки и собираем заказы в один график, чтобы плитка не приехала на месяц позже, чем нужна бригаде. Работаем по вашему бюджету и держим его в общей таблице.',
      l: ['Подбор поставщиков и цен', 'График поставок под этапы', 'Проверка заказов при приёмке', 'Таблица бюджета в доступе'] }
  ];

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var nav = root.querySelector('#vbsdp-nav'), panel = root.querySelector('#vbsdp-panel');
    var cur = 0, h = '';

    for (var j = 0; j < STAGES.length; j++) {
      h += '<button type="button" class="vbsdp-tab" role="tab" aria-selected="false" data-i="' + j + '">' +
        '<span class="vbsdp-tab__n">' + (j + 1) + '<\/span>' +
        '<span class="vbsdp-tab__t">' + STAGES[j].t + '<\/span>' +
        '<span class="vbsdp-tab__s">' + STAGES[j].s + '<\/span><\/button>';
    }
    nav.innerHTML = h;

    var tabs = nav.querySelectorAll('.vbsdp-tab');
    for (var k = 0; k < tabs.length; k++) {
      tabs[k].onclick = function () { cur = +this.getAttribute('data-i'); draw(); };
    }

    function draw() {
      var st = STAGES[cur], li = '';
      for (var m = 0; m < st.l.length; m++) li += '<li>' + st.l[m] + '<\/li>';
      panel.innerHTML = '<div class="vbsdp-meta"><i>Этап ' + (cur + 1) + ' из ' + STAGES.length + '<\/i>' +
        '<i>' + st.s + '<\/i><i>срок ' + st.d + '<\/i><\/div>' +
        '<h3 class="vbsdp-h3">' + st.t + '<\/h3>' +
        '<p class="vbsdp-txt">' + st.x + '<\/p>' +
        '<ul class="vbsdp-list">' + li + '<\/ul>';
      for (var n = 0; n < tabs.length; n++) {
        var on = n === cur;
        tabs[n].className = on ? 'vbsdp-tab vbsdp-tab--on' : 'vbsdp-tab';
        tabs[n].setAttribute('aria-selected', on ? 'true' : 'false');
      }
    }
    draw();
  }
})();
</script>

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