JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

HTML

<ul class="">
    <li class="arrow_box ">Преимущества</li>
    <li class="arrow_box">Работы</li>
    <li class="arrow_box">Популярное</li>
    <li class="arrow_box">Часы</li>
</ul>

CSS

li {
list-style: none;
    float:left;
margin-left: 10px;
}
.arrow_box {
position: relative;
background: transparent;
border-bottom: 1px solid #d5872f;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
}
.arrow_box:hover {
border: 2px solid #d5872f;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: transparent;
border-top-color: transparent;
border-width: 3px;
margin-left: -3px;
}
.arrow_box:hover:after {
border-top-color: white;
}
.arrow_box:before {
border-color: transparent;
border-top-color: transparent;
border-width: 6px;
margin-left: -6px;
}
.arrow_box:hover:before {
border-top-color: #d5872f;
}