JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class="tabs">
  <button class="butt active" data-target="1">button1</button>
  <button class="butt" data-target="2">button2</button>
  <button class="butt" data-target="3">button3</button>
</div>
<div class="tabcontent active" data-tab="1">tabcontent1</div>
<div class="tabcontent" data-tab="2">tabcontent2</div>
<div class="tabcontent" data-tab="3">tabcontent3</div>

CSS

.tabcontent{
  padding:20px 5px;
  border:2px solid #333;
  display:none;
  margin-top: 20px;
}
.tabcontent.active{
  display:block;
}
.tabs{
  display: flex;
}
.butt{
  flex:1;
}
.butt.active{
  border-color:transparent;
  color:#999;
  outline:none;
}

JavaScript

function toggleTabs(tab){
	var contents = document.querySelectorAll('.tabcontent');
  var tabs = document.querySelectorAll('.butt');
  var content = document.querySelector('.tabcontent[data-tab="' + tab.getAttribute('data-target') + '"]');
  [].forEach.call(contents, function(c){
  	c.classList.remove('active');
  });
  [].forEach.call(tabs, function(t){
  	t.classList.remove('active');
  });
  tab.classList.add('active');
  content.classList.add('active'); 
}
document.body.addEventListener('click', function(e){
	if(e.target.classList.contains('butt')){
  	toggleTabs(e.target);
  }
});