JSFiddle - React, Tailwind, and code Playground

by LOOnny

HTML

<div class="tabs">
  <div class="tab">
    <div>Tab 1</div>
  </div>
  <div class="tab">
    <div>Tab 2</div>
    <div>Tab 2</div>
  </div>
  <div class="tab">
    <div>Tab 3</div>
    <div>Tab 3</div>
    <div>Tab 3</div>
  </div>
  <div class="tab">
    <div>Tab 4</div>
    <div>Tab 4</div>
    <div>Tab 4</div>
    <div>Tab 4</div>
  </div>
  <div class="tab">
    <div>Tab 5</div>
    <div>Tab 5</div>
    <div>Tab 5</div>
    <div>Tab 5</div>
    <div>Tab 5</div>
  </div>
</div>

<div class="tabs-nav">
  <input type="button" value="Назад" onclick="back()">
  <input type="button" value="Далее" onclick="next()">
</div>

CSS

.tabs {
  position: relative;
  height: 100px;
}

.tab {
  position: absolute;
  top: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s 1s, visibility 1s 0s;
}


.tab_active {
  visibility: visible;
  opacity: 1;
}

.tab_unactive {
  
}

JavaScript

var
  tabs = document.querySelectorAll('.tab'),
  activeTab = 0;

showTab(0);

function back() {
  if (activeTab != 0) {
    showTab(--activeTab);
  }
}

function next() {
  if (activeTab != tabs.length - 1) {
    showTab(++activeTab);
  }

}

function showTab(showTabN) {
  tabs.forEach(tab => {
    tab.classList.remove('tab_active');
  });

  tabs[showTabN].classList.add('tab_active');
}