JSFiddle - React, Tailwind, and code Playground

by LOOnny

HTML

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

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

CSS

.tab {
  width: 300px;
  height: 200px;
  display: none;
  opacity: 0;
  transition: opacity 5s, display 0s 5s;
}

.tab_active {
  display: block;
  opacity: 1;
  transition: opacity 5s, display 0s 5s;
}

JavaScript

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


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

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

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

  tabs[n].style.display = 'block';
  tabs[n].style.opacity = '1';

}