JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="active">Alma</li>
    <li>Körte</li>
    <li>Szilva</li>
    <li>Barack</li>
    <span class="jel"></span>
</ul>

CSS

ul{
    list-style-type:none;
    font-family: arial;
    color: #4679BD;
}
ul li{
    float:left;
    display:block;
    padding:20px;
    border:1px solid #F6F6F6;
    position: relative;
    overflow: visible;
}
ul li:hover{
    background-color: #4679BD;
    color: #ffffff;
}
ul li.active{
    background-color: #4679BD;
    color: #ffffff;
    
}
.jel{
    display: block;
    width: 5px !importaint;
    height: 5px !importaint;
    background-color: #4679BD;
    content: "";
}
.active:after{
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #4679BD transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: 10px;
    content: "";
    height: 0;
    left: 50%;
    margin-left: -10px;
    pointer-events: none;
    position: absolute;
    top: 100%;
width: 0;}