Сравнение тарифов в Tilda
готовый код.

<section class="tselno-pricing" data-pricing>
  <div class="tselno-pricing__switch" role="group" aria-label="Период оплаты">
    <button type="button" data-period="once">Разово</button>
    <button type="button" data-period="month">Ежемесячно</button>
  </div>
  <div class="tselno-pricing__grid">
    <article data-plan="Старт" data-once="50000" data-month="20000">
      <span>01</span><h3>Старт</h3><strong data-price></strong><p>Лендинг или рекламная поддержка.</p><button type="button" data-select-plan>Выбрать</button>
    </article>
    <article data-plan="Система" data-once="120000" data-month="50000">
      <span>02</span><h3>Система</h3><strong data-price></strong><p>Сайт, аналитика и развитие.</p><button type="button" data-select-plan>Выбрать</button>
    </article>
    <article data-plan="Рост" data-once="250000" data-month="90000">
      <span>03</span><h3>Рост</h3><strong data-price></strong><p>Комплексная работа нескольких направлений.</p><button type="button" data-select-plan>Выбрать</button>
    </article>
  </div>
</section>

<style>
.tselno-pricing { --price-text:#10110f; --price-accent:#d9ff43; color:var(--price-text); font-family:Arial,sans-serif; }
.tselno-pricing__switch { margin-bottom:18px; display:flex; gap:8px; }
.tselno-pricing__switch button { min-height:44px; padding:0 18px; border:1px solid var(--price-text); background:transparent; color:inherit; cursor:pointer; }
.tselno-pricing__switch button.is-active { background:var(--price-accent); }
.tselno-pricing__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--price-text); border-left:1px solid var(--price-text); }
.tselno-pricing article { min-height:390px; padding:24px; border-right:1px solid var(--price-text); border-bottom:1px solid var(--price-text); display:flex; flex-direction:column; }
.tselno-pricing article.is-selected { background:var(--price-accent); }
.tselno-pricing article > span { font-size:12px; }
.tselno-pricing h3 { margin:54px 0 12px; font-size:38px; }
.tselno-pricing strong { font-size:clamp(28px,3vw,46px); }
.tselno-pricing p { margin:20px 0; line-height:1.5; }
.tselno-pricing article button { min-height:50px; margin-top:auto; border:1px solid var(--price-text); background:var(--price-text); color:#fff; cursor:pointer; }
@media (max-width:800px) { .tselno-pricing__grid { grid-template-columns:1fr; } .tselno-pricing article { min-height:310px; } }
</style>

<script>
(function () {
  var FORM_SELECTOR = 'form';
  var root = document.querySelector('[data-pricing]');
  if (!root) return;
  var period = 'once';
  var cards = Array.from(root.querySelectorAll('[data-plan]'));
  var switches = Array.from(root.querySelectorAll('[data-period]'));
  var selectedCard = null;

  function format(value) { return new Intl.NumberFormat('ru-RU').format(Number(value)) + ' ₽'; }
  function field(form, name, value) {
    var input = form.querySelector('input[name="' + name + '"]');
    if (!input) { input = document.createElement('input'); input.type = 'hidden'; input.name = name; form.appendChild(input); }
    input.value = value;
  }
  function render() {
    cards.forEach(function (card) {
      var value = period === 'once' ? card.dataset.once : card.dataset.month;
      card.querySelector('[data-price]').textContent = format(value) + (period === 'month' ? ' / мес.' : '');
    });
    switches.forEach(function (button) {
      var active = button.dataset.period === period;
      button.classList.toggle('is-active', active);
      button.setAttribute('aria-pressed', String(active));
    });
    syncSelection();
  }
  function syncSelection() {
    if (!selectedCard) return;
    var value = period === 'once' ? selectedCard.dataset.once : selectedCard.dataset.month;
    document.querySelectorAll(FORM_SELECTOR).forEach(function (form) {
      field(form, 'selected_plan', selectedCard.dataset.plan);
      field(form, 'billing_period', period === 'once' ? 'Разово' : 'Ежемесячно');
      field(form, 'selected_price', format(value));
    });
  }
  switches.forEach(function (button) { button.addEventListener('click', function () { period = button.dataset.period; render(); }); });
  cards.forEach(function (card) {
    card.querySelector('[data-select-plan]').addEventListener('click', function () {
      cards.forEach(function (item) { item.classList.remove('is-selected'); });
      card.classList.add('is-selected');
      selectedCard = card;
      syncSelection();
    });
  });
  render();
})();
</script>