JSFiddle - React, Tailwind, and code Playground

HTML

<button class="tablink selected" onclick="openPage('Home', this)">First Button</button>
<button class="tablink" onclick="openPage('News', this)">Second Button</button>

<div id="Home" class="tabcontent visible">
  <h3>Home</h3>
  <p>Home is where the heart is..</p>
</div>

<div id="News" class="tabcontent">
  <h3>News</h3>
  <p>Some news this fine day!</p>
</div>

CSS

.tablink {
  display: inline-block;
  min-width: 128px;
  font-size: 16px;
  padding: 8px;
  color: #6D6E70;
  font-weight: 500;
  text-decoration: none;
  background-color: #F2F2F2;
}

.tablink.selected {
  color: #fff;
  background-color: #6D6E70;
}

.tablink:hover {
  background-color: #777;
  color: #fff;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: black;
  display: none;
  padding: 100px 20px;
  height: 100%;
}

.tabcontent.visible {
  display: block;
}

JavaScript

function openPage(pageName, elmnt) {
  document.querySelector('.tablink.selected').classList.remove('selected');
  elmnt.classList.add('selected');

  document.querySelector('.tabcontent.visible').classList.remove('visible');
  document.getElementById(pageName).classList.add('visible');
}