JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="tabbed">
<nav>
  <ul>
  <li class="active"><a href="#first">First Tab</a></li>
  <li><a href="#second">2nd Tab</a></li>
  <li><a href="#last">Last!</a></li>
  </ul>
</nav>
<div id="first">
  Content of first tab.
</div>
<div id="second">
  2nd tab content!
</div>
<article id="last">
  <header>Last!</header>
  <section>last content</section>
</article>
</div>
</body>

CSS

body {background-color:white;}
.tabbed>nav>ul{list-style:none;padding:0;margin:0}
.tabbed>nav>ul>li>a{text-decoration:none;padding:1em;display:inline-block}
.tabbed>nav>ul>li{border:1px solid;border-left:none;border-bottom:none;background-color:lightgrey;float:left}
.tabbed>nav>ul>li:hover{background-color:white;cursor:pointer}
.tabbed>nav>ul>li:first-of-type{border-left:1px solid}
.tabbed>nav>ul>li.active{background-color:white;z-index:30;display:inline-block;padding-bottom:1px;margin-bottom:-1px}
.tabbed>*:not(nav){border:1px solid;clear:left;z-index:20}

JavaScript

(function() {
  var tabs = document.querySelectorAll('.tabbed>nav>ul>li>a:first-of-type');
  var onclick=function(panel, tab){
    console.assert(tab.content != null);
    return function(e) {
      e.preventDefault();
      panel.activeTab.content.style.display='none';
      panel.activeTab.classList.remove('active');
      panel.activeTab = tab;
      tab.classList.add('active');
      tab.content.style.display='';
    };
  };
  for (var i = 0; i < tabs.length; ++i) {
  	var tab = tabs[i];
    var li = tab.parentNode;
    var panel = li.parentNode.parentNode;
    li.content = document.querySelector(tab.hash);
    tab.addEventListener('click', onclick(panel, li));
    if (li.classList.contains('active'))
      panel.activeTab = li;
    else
      li.content.style.display = 'none';
  }
})();