JSFiddle - React, Tailwind, and code Playground

HTML

<div id='settingNev' style='display:inline-block' >
<ul >
  <li id="L1"  runat="server"><a id="A1" onserverclick="show_view1" runat="server"><span>Personal</span></a></li>
   <li id="L2" runat="server"><a id="A2" onserverclick="show_view2" runat="server"><span>Job</span></a></li>
   <li id="L3" runat="server"><a id="A3" onserverclick="show_view3" runat="server"><span>Contact</span></a></li>
   <li id="L4" runat="server"><a id="A4" onserverclick="show_view2" runat="server"><span>222222222222222222222222222222</span></a></li>
</ul>
</div>

CSS

body {
}
#settingNev {
  float: none;
  background: transparent;
  font-size: 93%;
  line-height: normal;
  position:relative;
}
#settingNev ul {
  margin: 0;
  padding: 10px 10px 0 50px;
  list-style:none;
  display:block;
}
#settingNev li {
  display: block;
  margin: 0;
  padding: 0;
}
#settingNev a {
  float: left;
  margin:0 3px 0 3px;
  text-decoration: none;
  border-radius: 6px 6px 0px 0px;
}
#settingNev a span {
  float: left;
  display: block;
  border-radius: 6px 6px 0px 0px; 
  padding: 5px 15px 4px 6px;
  color: #666;
  border-top:1px solid transparent;
  border-left:1px solid transparent;
  border-right:1px solid transparent;
}


#settingNev .active a
{
  background-color:white;
  top:1px;
  font-size: 100%;
  
}

#settingNev .active a span
{
  top:1px;
  border-top:1px solid black;
  border-left:1px solid black;
  border-right:1px solid black;
  border-bottom:0px solid black;
  color: black;
}
#cssmenu a:hover {
}
#settingNev a:hover span 
{   
  border-bottom:0px solid black;
  border-top:1px solid black;
  border-left:1px solid black;
  border-right:1px solid black;
}