Табы: pug, sass, js

common.js

  // Tabs
  (function () {
    let tabBlocks = document.querySelectorAll('.tabBlock');
    let items = document.querySelectorAll('.tabs__item');
    items[0].classList.add('active');
    tabBlocks[0].classList.add('tabBlock_selected');
    items.forEach((item) => {
      item.addEventListener('click', function(e) {
        items.forEach((item) => {
          item.classList.remove('active');
        });
        item.classList.add('active');
        let hrf = item.getAttribute('data-href');
        tabBlocks.forEach((block) => {
          block.classList.remove('tabBlock_selected');
          if(block.getAttribute('id') === hrf){
            block.classList.add('tabBlock_selected');
          }
        });
      });
    });
  })(); //------- end Tabs ---------

tabs.pug

    .tabs
      ul.tabs__menu
        li.tabs__item(data-href="tab_1")
          | Первая вкладка
        li.tabs__item(data-href="tab_2")
          | Вторая вкладка
        li.tabs__item(data-href="tab_3")
          | Третья вкладка
      .tabs__area
        .tabBlock#tab_1
          h2.tabBlock__title Заголовок 1
          .tabBlock__info
            p
              | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex voluptates rem, dolorum vitae necessitatibus quo quae totam veniam
        .tabBlock#tab_2
          h2.tabBlock__title Заголовок 2
          .tabBlock__info
            p
              | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex voluptates rem, dolorum vitae necessitatibus quo quae totam veniam 
        .tabBlock#tab_3
          h2.tabBlock__title Заголовок 3
          .tabBlock__info
            p
              | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex 

tabs.sass

  .tabs
    &__menu
      position: relative
      overflow: hidden
      font-size: 0
      list-style: none
      background-color: green
    &__item
      display: inline-block
      width: calc(100% / 3)
      padding: 15px
      overflow: hidden
      font-size: 22px
      color: #fff
      text-align: center
      vertical-align: top
      cursor: pointer
      &.active
        background-color: #b5f2ea
        color: green
    &__area
      position: relative
      overflow: hidden

  // так как tabs__area будет принимать
  // размер блока, имеющего position: relative,
  // а абсолютно позиционированные блоки будут
  // за ним и не видны, так как у tabs__area
  // overflow: hidden, то это позволяем обойтись без
  // display: none / block
  .tabBlock
    position: absolute
    top: 0
    left: 0
    z-index: 1
    padding: 15px
    background-color: #b5f2ea
    &__title
      margin-bottom: 20px
      font-size: 20px
      text-align: center
      transition: opacity .3s ease .3s, transform .6s ease .3s
      transform: translate(0, -200%)
    &__info
      visibility: hidden
      opacity: 0
      transition: opacity .3s ease 0s, transform .6s ease 0s
      transform: translate(0, -100%)
      p
        font-size: 13px
        color: green

  .tabBlock_selected
    position: relative
    z-index: 2
    .tabBlock__title,
    .tabBlock__info
      visibility: visible
      opacity: 1
      transform: translate(0, 0%)