JSFiddle - React, Tailwind, and code Playground

HTML

<button class="tablink" id="defaultOpen" onclick="openPage('Home', this, '#6D6E70')">First Button</button>
<button class="tablink" onclick="openPage('News', this, '#6D6E70')">Second Button</button>
<div id="Home" class="tabcontent">
  <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: #fff;
    font-weight: 500;
    text-decoration: none;
    background-color: #F2F2F2;
}

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

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

}

JavaScript

function openPage(pageName, elmnt, color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "none";
  }
  document.getElementById(pageName).style.display = "block";
  elmnt.style.backgroundColor = color;
  if (pageName === 'News') {
    elmnt.style.color = 'black'
  }

}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();