JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">Entertainment</a></li>
    <li><a href="#">General</a></li>
    <li><a href="#">Technology</a></li>
</ul>

CSS

body {
    margin: 20px;
    background : url("http://jsfiddle.net/img/handle-h.png");
}
li {
    list-style-type: none;
    display: inline-block;
    padding: 5px 20px;
}
.active, li:hover {
    border-radius: 12px;
    position: relative;
    background: #88b7d5;
}
.active:after, li:hover:after {
    content: " ";
    position: absolute;    
    top: 100%;
    left: 44%;    
    border: 8px solid transparent;
    border-top: 10px solid #88b7d5;

}