Блок тарифов риелторских услуг для Tilda

<section class="vbtru">
  <div class="vbtru-wrap">
    <div class="vbtru-head">
      <h2 class="vbtru-h2">Три формата работы с риелтором</h2>
      <p class="vbtru-lead">Вознаграждение считается либо процентом от суммы сделки, либо фиксированной ставкой за сопровождение. Ниже видно, что входит в каждый формат, сколько он занимает и когда наступает оплата.</p>
    </div>

    <div class="vbtru-grid" id="vbtru-grid"></div>

    <div class="vbtru-toggle">
      <button type="button" class="vbtru-tbtn" id="vbtru-tbtn" aria-expanded="false" aria-controls="vbtru-cmp">Развернуть построчное сравнение</button>
    </div>

    <div class="vbtru-cmp" id="vbtru-cmp">
      <div class="vbtru-cmp__in" id="vbtru-rows"></div>
    </div>

    <p class="vbtru-foot">Расходы на нотариуса, банковскую ячейку и госпошлину оплачиваются отдельно по счетам этих организаций.</p>
  </div>
</section>

<style>
.vbtru, .vbtru *, .vbtru *::before, .vbtru *::after { box-sizing: border-box; }
.vbtru {
  --acc: #1f6f5c; --acc-dark: #175646; --ink: #1a2320; --muted: #5c6c67; --line: #dfe6e3; --soft: #f3f7f5;
  --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;
}
.vbtru-wrap { max-width: 1140px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbtru-head { max-width: 46em; margin-bottom: clamp(24px, 3vw, 40px); }
.vbtru-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; margin: 0 0 12px; }
.vbtru-lead { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }

.vbtru-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 16px; align-items: stretch; }
.vbtru-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(22px, 2.4vw, 30px); background: #fff; }
.vbtru-card--hot { border-color: var(--acc); background: var(--soft); }
.vbtru-badge { position: absolute; top: -11px; left: clamp(22px, 2.4vw, 30px); background: var(--acc); color: #fff;
  font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 5px 12px; }
.vbtru-name { font-family: var(--fh); font-size: 19px; font-weight: 600; margin: 0 0 6px; }
.vbtru-for { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0 0 18px; min-height: 4.2em; }
.vbtru-price { min-height: 78px; }
.vbtru-price b { display: block; font-family: var(--fh); font-size: clamp(23px, 2.4vw, 30px); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; }
.vbtru-price span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted); margin-top: 6px; }
.vbtru-term { font-size: 13px; color: var(--muted); padding: 14px 0; margin: 0 0 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vbtru-term b { color: var(--ink); font-weight: 600; }
.vbtru-inc { list-style: none; margin: 0 0 22px; padding: 0; flex: 1; display: grid; gap: 9px; align-content: start; }
.vbtru-inc li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.5; }
.vbtru-inc li::before { content: ''; flex: 0 0 15px; width: 15px; height: 15px; margin-top: 3px; border-radius: 50%; background: var(--acc);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.vbtru-cta, .vbtru-cta:link, .vbtru-cta:visited, .vbtru-cta:active, .vbtru-cta:focus { display: flex; align-items: center; justify-content: center;
  margin-top: auto; min-height: 52px; border-radius: 10px; font-size: 15.5px; font-weight: 600;
  background: var(--soft); color: var(--ink) !important; text-decoration: none !important; transition: background .18s ease; }
.vbtru-cta:hover { background: #e4eeea; color: var(--ink) !important; }
.vbtru-card--hot .vbtru-cta { background: var(--acc); color: #fff !important; }
.vbtru-card--hot .vbtru-cta:hover { background: var(--acc-dark); color: #fff !important; }

.vbtru-toggle { text-align: center; margin-top: 22px; }
.vbtru-tbtn { -webkit-appearance: none; appearance: none; margin: 0; font: inherit; cursor: pointer; border: 1.5px solid var(--line);
  background: #fff !important; color: var(--ink) !important; border-radius: 999px; padding: 12px 26px; font-size: 15px; transition: border-color .18s ease; }
.vbtru-tbtn:hover { border-color: var(--acc); }
.vbtru-cmp { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.22,1,.36,1); }
.vbtru-cmp__in { padding-top: 24px; }

.vbtru-row { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 12px; align-items: center;
  padding: 12px 16px; border-radius: 10px; font-size: 14.5px; }
.vbtru-row:nth-child(odd) { background: var(--soft); }
.vbtru-row--hd { font-size: 12px; font-weight: 600; color: var(--muted); background: none !important; padding-bottom: 6px; }
.vbtru-row--hd span:not(:first-child) { text-align: center; }
.vbtru-cell { text-align: center; }
.vbtru-yes { color: var(--acc); font-weight: 600; }
.vbtru-no { color: #b3bcb9; }
.vbtru-txt { font-size: 12.5px; color: var(--muted); }

.vbtru-foot { margin: clamp(20px, 2.4vw, 28px) 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

@media (max-width: 720px) {
  .vbtru-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px 16px; }
  .vbtru-row--hd { display: none; }
  .vbtru-cell { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; text-align: left;
    font-size: 13.5px; padding-top: 6px; border-top: 1px dashed var(--line); }
  .vbtru-cell::before { content: attr(data-label); color: var(--muted); font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .vbtru * { transition: none !important; } }
</style>

<script>
(function () {
  var OPEN = false;                 /* true - сравнение раскрыто сразу */
  var CTA_HREF = '#zayavka';        /* якорь кнопки: куда ведёт обращение */

  /* ПАКЕТЫ УСЛУГ */
  var PACKS = [
    { name: 'Сопровождение сделки', hot: false,
      forWho: 'Вторая сторона уже найдена, нужно провести расчёты и регистрацию без ошибок',
      price: '45 000 ₽', note: 'фиксированная сумма, половина при старте, остаток в день сделки', term: 'от 2 недель',
      inc: ['Проверка собственника и документов', 'Договор купли-продажи под вашу ситуацию', 'Расчёты через ячейку или аккредитив', 'Подача на регистрацию и выписка на руки'] },
    { name: 'Продажа под ключ', hot: true,
      forWho: 'Нужно продать квартиру по рыночной цене и не тратить выходные на показы',
      price: '2,5% от цены объекта', note: 'минимум 120 000 ₽, оплата после регистрации перехода права', term: '45-90 дней',
      inc: ['Оценка по закрытым сделкам района', 'Съёмка, тексты и продвижение объявлений', 'Показы без вашего присутствия', 'Переговоры и торг с покупателем', 'Проверка покупателя и источника денег', 'Сделка и регистрация под ключ'] },
    { name: 'Подбор с торгом', hot: false,
      forWho: 'Покупателю нужен вариант под запрос и снижение цены на переговорах',
      price: '1,8% от суммы покупки', note: 'минимум 90 000 ₽, аванс 20 000 ₽ засчитывается в сумму', term: 'от 3 недель',
      inc: ['Подбор вариантов по вашим условиям', 'Выезд на просмотры вместе с вами', 'История квартиры и всех собственников', 'Торг с продавцом и его агентом', 'Заявка в банки по ипотеке'] }
  ];

  /* СТРОКИ СРАВНЕНИЯ: true / false / строка */
  var ROWS = [
    { n: 'Проверка юридической истории', v: [true, true, true] },
    { n: 'Оценка по закрытым сделкам района', v: ['за доплату', true, true] },
    { n: 'Съёмка и размещение объявлений', v: [false, true, false] },
    { n: 'Показы без собственника', v: [false, true, 'вместе с вами'] },
    { n: 'Торг со второй стороной', v: [false, true, true] },
    { n: 'Подбор вариантов по запросу', v: [false, false, true] },
    { n: 'Заявка в банки по ипотеке', v: ['сопровождение', true, true] },
    { n: 'Договор и безопасные расчёты', v: [true, true, true] },
    { n: 'Регистрация перехода права', v: [true, true, true] },
    { n: 'Оплата после регистрации', v: [false, true, 'частично'] }
  ];

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var grid = root.querySelector('#vbtru-grid');
    var btn = root.querySelector('#vbtru-tbtn');
    var box = root.querySelector('#vbtru-cmp');
    var rows = root.querySelector('#vbtru-rows');

    grid.innerHTML = PACKS.map(function (p) {
      return '<article class="vbtru-card' + (p.hot ? ' vbtru-card--hot' : '') + '">' +
        (p.hot ? '<span class="vbtru-badge">Выбирают чаще<\/span>' : '') +
        '<h3 class="vbtru-name">' + p.name + '<\/h3>' +
        '<p class="vbtru-for">' + p.forWho + '<\/p>' +
        '<div class="vbtru-price"><b>' + p.price + '<\/b><span>' + p.note + '<\/span><\/div>' +
        '<p class="vbtru-term">Срок работы: <b>' + p.term + '<\/b><\/p>' +
        '<ul class="vbtru-inc">' + p.inc.map(function (x) { return '<li>' + x + '<\/li>'; }).join('') + '<\/ul>' +
        '<a class="vbtru-cta" href="' + CTA_HREF + '">Обсудить формат<\/a><\/article>';
    }).join('');

    function cell(v, name) {
      var inner;
      if (v === true) inner = '<span class="vbtru-yes">Есть<\/span>';
      else if (v === false) inner = '<span class="vbtru-no">Нет<\/span>';
      else inner = '<span class="vbtru-txt">' + v + '<\/span>';
      return '<span class="vbtru-cell" data-label="' + name + '">' + inner + '<\/span>';
    }

    rows.innerHTML =
      '<div class="vbtru-row vbtru-row--hd"><span>Что входит<\/span>' +
      PACKS.map(function (p) { return '<span>' + p.name + '<\/span>'; }).join('') + '<\/div>' +
      ROWS.map(function (r) {
        return '<div class="vbtru-row"><span class="vbtru-lab">' + r.n + '<\/span>' +
          r.v.map(function (v, i) { return cell(v, PACKS[i] ? PACKS[i].name : ''); }).join('') + '<\/div>';
      }).join('');

    function setOpen(on) {
      btn.setAttribute('aria-expanded', on ? 'true' : 'false');
      btn.textContent = on ? 'Свернуть сравнение' : 'Развернуть построчное сравнение';
      box.style.maxHeight = on ? box.scrollHeight + 'px' : '0px';
    }
    btn.addEventListener('click', function () { setOpen(btn.getAttribute('aria-expanded') !== 'true'); });
    setOpen(OPEN);

    window.addEventListener('resize', function () {
      if (btn.getAttribute('aria-expanded') === 'true') { box.style.maxHeight = 'none'; box.style.maxHeight = box.scrollHeight + 'px'; }
    });
  }
})();
</script>

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