JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tabs">
    <li class="act">Active</li>
    <li>Not Active</li>
    <li>Not Active</li>
    <li>Not Active</li>
</ul>

CSS

body {background:#eee;}
ul {
   position:relative;
   margin:10px; padding-left:20px;
   overflow:hidden;
}
ul:before{
    content:'\0020';
    display:block; height:1px;
    position:absolute; bottom:0px; left:0px; right:0px; 
    z-index:1;
    overflow:hidden;
    border-bottom:solid 2px grey;
}
li {
    position:relative;
    z-index:2;
    display:inline-block; margin-right:1px;
    border-bottom:solid 1px transparent; border-radius:7px 7px 0 0;
    height:35px; padding:0 9px;
    font:bold 12px/35px Arial; color:#444;
}
li.act{
    border-bottom:solid 2px red;
}