Таби / Вкладки:

<section class="super-tabs-section">
    <div class="tabs-header">
        <button class="tab-btn active" data-tab="tab-1"><s class="ti-pie-chart"></s> Основне</button>
        <button class="tab-btn" data-tab="tab-2"><s class="ti-package"></s> Шаблон сторінки</button>
        <button class="tab-btn" data-tab="tab-3"><s class="ti-comments"></s> Опитування</button>
    </div>
    <div class="tabs-content">
        <div id="tab-1" class="tab-panel active">
            <!-- Зміст вкладинки 1 -->
        </div>
        <div id="tab-2" class="tab-panel">
            <!-- Зміст вкладинки 2 -->
        </div>
        <div id="tab-3" class="tab-panel">
            <!-- Зміст вкладинки 3 -->
        </div>
    </div>
</section>

<!-- JavaScript для перемикання вкладок -->
<script>
document.addEventListener('click', function(e) {
  var btn = e.target.closest('.super-tabs-section .tab-btn');
  if (!btn) return;
  var section = btn.closest('.super-tabs-section');
  if (!section) return;

  var targetId = btn.getAttribute('data-tab');
  if (!targetId) return;

  section.querySelectorAll('.tab-btn').forEach(function(b) {
    b.classList.remove('active');
  });
  section.querySelectorAll('.tab-panel').forEach(function(p) {
    p.classList.remove('active');
  });

  btn.classList.add('active');
  var targetPanel = section.querySelector('#' + targetId);
  if (targetPanel) {
    targetPanel.classList.add('active');
  }
});
</script>