JSFiddle - React, Tailwind, and code Playground

by joncampbell

HTML

<ul>
    <li>Home</li>
    <li class="active">About</li>
    <li>Contact</li>
    <li>Blog</li>
</ul>
<div class="main"> 
    Next Box
</div>

CSS

html,body{
    margin:0px;
    padding:0px;
}
ul{
    /* for looks */
    list-style:none;
    margin:0px;
    padding:0px;
}
li{
    background:black;
    color:white;
    display:inline-block;
    margin:0px;
    padding:5px 20px;
}
li.active{
    position:relative;
}
li.active:after{
    content:'';
    position:absolute;
    top:100%;
    left:0px;
    border-top:5px solid yellow;    
    width:100%;
}
.main{
    background-color:#dddddd;
    min-height:400px;
}