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) {
    for (var k = 0; k < tabs.length; k++) {
      if (this == tabs[k]) {
        con[k].classList.remove('none');
      } else {
        con[k].classList.add('none');
      }
    }
  })
}