JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<table class="tabs">
  <thead><tr><th class="active" id="Foo">Foo</th><th id="Bar">Bar</th><th id="Another">Another Tab!</th></tr></thead>
  <tbody>
    <tr>
      <td headers="Foo">Foo stuff goes here! sdflkgjn sdlfjkgn sdjkfgh bnsdjfhgb sdjklfg sjdfhgb sjdhfg sd</td>
      <td headers="Bar">Bar stuff here! adfglk;mgf kljsdnfgksdljn</td>
      <td headers="Another">
        asdfkljnasdfjkhbasdfg asdgubasdgbaskdugbasdbfafaduhasdf andfg
        sdfghs'gfhjwsdf
        hsfg
        hdfg
        hj dgfhj  sfdk jsf;bkljsfgkjsdnfgsjkdn
      </td>
    </tr>
  </tbody>
</table>
</body>

CSS

body {background-color:white;}
table.tabs{border:none; border-collapse:collapse}
table.tabs>thead>tr>th{text-align: left;padding:15px;position:relative;bottom:-1px;background-color:white}
table.tabs>thead>tr>th:hover{background-color:lightgrey; cursor:pointer}
table.tabs>thead>tr>th.active:hover{background-color:white}
table.tabs>thead{border-bottom:1px solid}
table.tabs>thead>tr>th.active{border:1px solid;border-bottom:none}

JavaScript

function regTabs() {
  [].forEach.call(document.querySelectorAll('table.tabs td[headers]'), function (x) {
    var t = x.parentElement.parentElement; // table or tbody tracks active tab
    var th = document.getElementById(x.attributes.headers.value);
    if (th != null) {
      x.th = th;
      th.style.float = 'left';
      th.addEventListener('click', function() {
        t.activeTab.style.display = 'none';
        t.activeTab.th.classList.remove('active');
        x.style.display = '';
        th.classList.add('active');
        t.activeTab = x;
      });
    }
    if (th == null || !th.classList.contains('active'))
      x.style.display = 'none';
    else
      t.activeTab = x;
  });
}
regTabs();