JSFiddle - React, Tailwind, and code Playground

HTML

<div id="usual1" class="usual"> 
    <ul> 
      <li><a href="#" class="selected">Tab 1</a></li> 
      <li><a href="#">Tab 2</a></li> 
      <li><a href="#">Tab 3</a></li> 
    </ul> 
    <div id="conTabs1" style="display: block; ">This is tab 1.</div> 
    <div id="conTabs2" style="display: none; ">More content in tab 2.</div> 
    <div id="conTabs3" style="display: none; ">Tab 3 is always last! <div>Tab 3 is always last!</div> </div> 
  </div> 
 
   <div id="usual2" class="usual"> 
    <ul> 
      <li><a href="#" class="selected">Tab 1</a></li> 
      <li><a href="#">Tab 2</a></li> 
      <li><a href="#">Tab 3</a></li> 
    </ul> 
    <div id="wa1" style="display: block; ">This is tab 1.</div> 
    <div id="wa2" style="display: none; ">More content in tab 2.</div> 
    <div id="wa3" style="display: none; ">Tab 3 is always last! <div>Tab 3 is always last!</div> </div> 
  </div>

CSS

*{margin:0;padding:0;}
    body{font-size: 12px;}
    .usual{background:#181818; color:#111; padding:15px 20px; width:500px; border:1px solid #222; margin:8px auto;}
    .usual li{list-style:none; float:left;}
    .usual ul a{display:block; padding:6px 10px; text-decoration:none!important; margin:1px; margin-left:0; font:10px Verdana; color:#FFF; background:#444;}
    .usual ul a:hover{color:#FFF; background:#111;}
    .usual ul a.selected{margin-bottom:0; color:#000; background:snow; border-bottom:1px ; cursor:default;}
    .usual div{padding:10px 10px 8px 10px; *padding-top:3px; *margin-top:-15px; background:snow; font:10pt Georgia;}

JavaScript

function myTabs(tabId, conIds){
 
      var tabDIV = document.getElementById(tabId),
          lis = tabDIV.getElementsByTagName("ul")[0].getElementsByTagName("li"),
          lisNum = lis.length;
     
      for (var i = 0; i < lisNum; i++) { 
 
        lis[i].setAttribute("index", i+1); //给每个li加一个自定义属性保存index
        lis[i].onclick = function(){
 
           var num = this.getAttribute("index");
 
           //删除元素的样式
          for(var n = 0; n < lisNum; n++){  
             lis[n].children[0].setAttribute("class", ""); //删除a元素的class
             document.getElementById(conIds+(n+1)).style.display = "none";
           };
 
          this.children[0].setAttribute("href", "javascript:return false;");
          this.children[0].setAttribute("class", "selected"); //a元素添加class=selected
 
          document.getElementById(conIds+num).style.display = "block";
        }
 
      };
  
    }
  
    myTabs("usual1", "conTabs");
    myTabs("usual2", "wa");