JSFiddle - React, Tailwind, and code Playground

by Virtual

HTML

<ul>
    <li class="current">Home</li>
    <li>About</li>
    <li>Blog</li>
    <li>Contact</li>
</ul>

CSS

ul{
    list-style:none;
}
li{
    display:block;
    float:left;
    margin-right:10px;
    background-color:red;
    padding:10px;
    position: relative;
}
li.current{
    background-color:#78c4dd;
}
li.current:after{
    border-left: 10px solid transparent;
    border-right: 11px solid transparent; content:"";
	border-top: 13px solid #78c4dd;
    position: absolute;
    bottom: -13px;
    width: 0px;
    left: 50%;
    margin-left: -10px;
}