Блок отзывов о дизайн-проекте для Tilda

<section class="vbodp2">
  <div class="vbodp2-wrap">
    <div class="vbodp2-head">
      <h2 class="vbodp2-h2">Владельцы про работу над проектом</h2>
      <p class="vbodp2-lead">Отзывы собираем через месяц после того, как альбом передан и начался ремонт. Рядом с каждым указан объект, стиль и как сошёлся бюджет комплектации.</p>
      <div class="vbodp2-filter" id="vbodp2-filter" role="group" aria-label="Отбор отзывов по стилю"></div>
    </div>

    <div class="vbodp2-grid" id="vbodp2-grid"></div>
    <p class="vbodp2-empty" id="vbodp2-empty" hidden>По этому стилю отзывов пока нет.</p>
  </div>
</section>

<style>
.vbodp2, .vbodp2 *, .vbodp2 *::before, .vbodp2 *::after { box-sizing: border-box; }
.vbodp2 {
  --acc: #9a7b53; --ink: #26231e; --muted: #7a736a; --line: #e6e0d6; --soft: #f7f4ef; --ok: #5f7d5a;
  --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(38px, 5.4vw, 88px) 20px;
}
.vbodp2-wrap { max-width: 1220px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 36px); }
.vbodp2-head { margin-bottom: clamp(22px, 3vw, 34px); }
.vbodp2-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; max-width: 20em; }
.vbodp2-lead { font-size: 16px; line-height: 1.62; color: var(--muted); margin: 0 0 22px; max-width: 44em; }

.vbodp2-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.vbodp2-chip { border: 1px solid var(--line); margin: 0; padding: 10px 18px; -webkit-appearance: none; appearance: none;
  font: inherit; font-size: 14px; cursor: pointer; border-radius: 999px; background: #fff !important; color: var(--muted) !important;
  transition: border-color .18s ease, color .18s ease; }
.vbodp2-chip:hover { border-color: var(--acc); color: var(--ink) !important; }
.vbodp2-chip--on { border-color: var(--acc) !important; background: var(--acc) !important; color: #fff !important; }

.vbodp2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.vbodp2-card { border: 1px solid var(--line); border-radius: 8px; padding: 24px 26px; display: flex; flex-direction: column; }
.vbodp2-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.vbodp2-ava { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: var(--soft); display: flex; align-items: center;
  justify-content: center; font-family: var(--fh); font-size: 16px; font-weight: 600; color: var(--acc); }
.vbodp2-nm { display: block; font-size: 15.5px; font-weight: 600; }
.vbodp2-ob { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.vbodp2-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.vbodp2-tags i { font-style: normal; font-size: 12px; color: var(--muted); background: var(--soft); border-radius: 4px; padding: 6px 11px; }
.vbodp2-tags i.vbodp2-ok { color: var(--ok); background: rgba(95,125,90,.1); }
.vbodp2-tags i.vbodp2-over { color: #97643f; background: rgba(151,100,63,.1); }
.vbodp2-txt { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); }
.vbodp2-empty { margin: 20px 0 0; font-size: 15px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .vbodp2 * { transition: none !important; } }
</style>

<script>
(function () {
  var STYLES = ['Минимализм', 'Сканди', 'Современная классика', 'Мягкий лофт'];

  var REVIEWS = [
    { name: 'Ирина Л.', obj: 'Двушка 62 м², вторичка', style: 'Сканди', term: 'проект 5 недель', budget: 0,
      txt: 'Больше всего боялась, что нам нарисуют красивую картинку, а жить в ней будет неудобно. Планировку переделывали четыре раза, пока не сошлись на варианте с гардеробной вместо кладовки. Комплектацию собрали в таблицу с ценами, и по итогу вышли ровно в ту сумму, которую обсуждали в начале.' },
    { name: 'Павел и Анна', obj: 'Дом 180 м², два этажа', style: 'Мягкий лофт', term: 'проект 9 недель', budget: 7,
      txt: 'Дом со вторым светом и лестницей посередине, поэтому проект делали дольше обычного. Отдельно ценю развёртки: плиточник работал по ним и не задал ни одного вопроса. Бюджет комплектации подрос на семь процентов, но из-за нашей же замены дивана на более дорогой.' },
    { name: 'Марина К.', obj: 'Студия 34 м², новостройка', style: 'Минимализм', term: 'проект 4 недели', budget: 0,
      txt: 'На 34 метрах важен каждый сантиметр. Хранение спрятали в подиум и высокие шкафы до потолка, визуально квартира осталась пустой. Приятно, что дизайнер сразу отговорил от острова на кухне и объяснил, почему проход станет узким.' },
    { name: 'Сергей В.', obj: 'Трёшка 88 м², вторичка', style: 'Современная классика', term: 'проект 8 недель', budget: 4,
      txt: 'Заказывали проект с авторским надзором. Выезды были каждую неделю, замечания приходили списком с фотографиями, бригада их закрывала. Один раз спорили из-за высоты подвесного потолка, решили в нашу пользу после расчёта по вентиляции.' },
    { name: 'Ольга Т.', obj: 'Двушка 54 м², новостройка', style: 'Сканди', term: 'проект 5 недель', budget: 0,
      txt: 'Визуализацию правили три круга, и никто не намекал, что пора остановиться. Дуб в отделке заменили на более светлый оттенок уже после согласования, переделали спокойно. Ремонт идёт по чертежам, расхождений пока не нашли.' },
    { name: 'Дмитрий Н.', obj: 'Дом 145 м², каркасный', style: 'Мягкий лофт', term: 'проект 7 недель', budget: 12,
      txt: 'Проект получился сильный, но комплектация вышла дороже плана: кирпич ручной формовки подорожал, пока мы согласовывали остальное. Студия предложила два аналога дешевле, мы отказались сами. Претензий к работе нет, сроки выдержали до дня.' },
    { name: 'Екатерина Ж.', obj: 'Квартира 96 м², апартаменты', style: 'Современная классика', term: 'проект 8 недель', budget: 0,
      txt: 'Хотели классику без золота и лепнины. Дизайнер показал референсы, договорились на молдинги и латунь в фурнитуре. Ведомость мебели оказалась удобнее всего: с ней в салонах разговор занимал десять минут вместо двух часов.' },
    { name: 'Артём Б.', obj: 'Однушка 41 м², вторичка', style: 'Минимализм', term: 'проект 4 недели', budget: 3,
      txt: 'Брал только планировочное решение, без визуализации. Получил обмерный план, три расстановки и финальный вариант с размерами. Для моего случая этого хватило, а чертежи по электрике докупил отдельно уже в процессе ремонта.' }
  ];

  var roots = document.querySelectorAll('.vbodp2');
  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('#vbodp2-grid'), filter = root.querySelector('#vbodp2-filter');
    var empty = root.querySelector('#vbodp2-empty');
    var cur = 'all', h = '<button type="button" class="vbodp2-chip vbodp2-chip--on" data-s="all">Все объекты<\/button>';

    for (var j = 0; j < STYLES.length; j++) {
      h += '<button type="button" class="vbodp2-chip" data-s="' + STYLES[j] + '">' + STYLES[j] + '<\/button>';
    }
    filter.innerHTML = h;

    var chips = filter.querySelectorAll('.vbodp2-chip');
    for (var k = 0; k < chips.length; k++) {
      chips[k].onclick = function () { cur = this.getAttribute('data-s'); draw(); };
    }

    function badge(r) {
      if (!r.budget) return '<i class="vbodp2-ok">в бюджет комплектации уложились<\/i>';
      return '<i class="vbodp2-over">комплектация дороже плана на ' + r.budget + '%<\/i>';
    }

    function draw() {
      var out = '', shown = 0;
      for (var m = 0; m < REVIEWS.length; m++) {
        var r = REVIEWS[m];
        if (cur !== 'all' && r.style !== cur) continue;
        shown++;
        out += '<article class="vbodp2-card"><div class="vbodp2-top">' +
          '<span class="vbodp2-ava">' + r.name.charAt(0) + '<\/span>' +
          '<span><b class="vbodp2-nm">' + r.name + '<\/b><span class="vbodp2-ob">' + r.obj + '<\/span><\/span><\/div>' +
          '<div class="vbodp2-tags"><i>' + r.style + '<\/i><i>' + r.term + '<\/i>' + badge(r) + '<\/div>' +
          '<p class="vbodp2-txt">' + r.txt + '<\/p><\/article>';
      }
      grid.innerHTML = out;
      empty.hidden = shown > 0;
      for (var n = 0; n < chips.length; n++) {
        var on = chips[n].getAttribute('data-s') === cur;
        chips[n].className = on ? 'vbodp2-chip vbodp2-chip--on' : 'vbodp2-chip';
      }
    }
    draw();
  }
})();
</script>

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