JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>

CSS

ul {float:left;position:relative;width:400px; }
ul li {float:left;width:25%;
    text-align:center;
    font-size:11px;
    position:relative; 
    display:block;
 color:black;   
}
a {display:block;float:left;width:100%;color:black;position:relative;
    padding:10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

li:nth-child(1) a:after  {content:'About';width:100%;}
li:nth-child(2) a:after {content:'Blog';width:100%;}
li:nth-child(3) a:after {content:'Video';width:100%;}
li:nth-child(4) a:after {content:'Contact';width:100%;}