JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<dl class="tabs">
<dt class="active">Foo</dt><dt>Bar</dt><dt>Last!</dt>
<dd>
Foo stuff here.
</dd>
<dd>
Bar tab content
</dd>
<dd>
Last tab.
</dd>
</dl>
</body>

CSS

body {background-color:white;}
dl.tabs{border:none; border-collapse:collapse}
dl.tabs>dt{float:left;border:1px solid;border-bottom:none;border-left:none;padding:10px}
dl.tabs>dt:first-child{border-left:1px solid}
dl.tabs>.active{position:relative;background-color:white}
dl.tabs>dd{border:1px solid;float:left;margin:0;padding:0;margin-top:-1px;width:100%; clear:both}

JavaScript

(function() {
	var tabs = document.querySelectorAll('dl.tabs');
  for (var i = 0; i < tabs.length; ++i) {
  	var dl = tabs[i];
    var dt = dl.querySelectorAll('dt');
    var dd = dl.querySelectorAll('dd');
    if (dt.length != dd.length)
    	alert('Mismatched tabs for id=' + dl.id + ': ' + dt.length + ' dt elements but '+ dd.length + ' dd elements');
    var onclick=function(dl, tab){
    	return function() {
        dl.activeTab.dd.style.display='none';
        dl.activeTab.classList.remove('active');
      	dl.activeTab = tab;
        tab.classList.add('active');
        tab.dd.style.display='';
      };
    };
    for (var j=0; j < dt.length; ++j) {
      var tab = dt[j];
      tab.dd = dd[j];
    	tab.addEventListener('click', onclick(dl, tab));
      if (tab.classList.contains('active'))
        dl.activeTab = tab;
      else
        tab.dd.style.display = 'none';
    }
  }
})();