JSFiddle - React, Tailwind, and code Playground

HTML

<span class='tab'>Tab1</span><span class='tab'>Tab2</span><span class='tab'>Tab3</span>

<div class="content">
  <div class="c">aaaa a aaaaa  aaaaaa a a a a aaaaaa  aaaaaa aaaaa</div>
  <div class="c none">bbbb bbbb bbbbb bbbb bbbb bbbbb bbbb bbbbb bbbb bbbbb</div>
  <div class="c none">ccc ccccc cccccc ccccc cccccc ccccc ccccc</div>
</div>

CSS

span{
  display: inline-block;
  margin-right: 10px;
}

.content{
  width: 130px;
}

.none{
  display: none;
}

JavaScript

var tabs = document.querySelectorAll('.tab')
var con = document.querySelectorAll('.c')

for(var i = 0; i < tabs.length; i++){
  	tabs[i].addEventListener('click', function(e){
    
   	if(e.target == tabs[0]){
    	con[0].classList.remove('none');
      con[1].classList.add('none');
      con[2].classList.add('none');
     }
      
    if(e.target == tabs[1]){
    	con[0].classList.add('none');
      con[1].classList.remove('none');
      con[2].classList.add('none');
      }
      
    if(e.target == tabs[2]){
    	con[0].classList.add('none');
      con[1].classList.add('none');
      con[2].classList.remove('none');
      }
  })
}