JSFiddle - React, Tailwind, and code Playground
HTML
<nav class="header-menu">
<ul>
<li class="header-menu-list"><a href="#">Гороскоп<span class="arrow"></span></a></li>
<li class="header-menu-list"><a href="#">Гадания<span class="arrow"></span></a></li>
<li class="header-menu-list"><a href="#">Тесты<span class="arrow"></span></a></li>
<li class="header-menu-list"><a href="#">Психология<span class="arrow"></span></a></li>
<li class="header-menu-list"><a href="#">Любовь<span class="arrow"></span></a></li>
<li class="header-menu-list"><a href="#">Обо всем<span class="arrow"></span></a></li>
<li class="header-menu-list"><a href="#">Обо мне<span class="arrow"></span></a></li>
<li class="header-menu-list"><a href="#">Эксперты<span class="arrow"></span></a></li>
<li class="header-menu-list last"><a href="#">Фото статьи</a></li>
</ul>
<div class="header-menu_border-l"></div>
<div class="header-menu_border-r"></div>
<div class="header-menu_shadow"></div>
</nav>
CSS
.header-menu {
position: relative;
width: 1000px;
height: 47px;
clear: both;
background: grey;
}
.header-menu ul {
width: 1000px;
height: 47px;
list-style: none;
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
}
.header-menu-list {
float: left;
text-transform: uppercase;
height: 47px;
}
.header-menu-list a {
position: relative;
display: block;
color: #4b4b4b;
height: 47px;
line-height: 47px;
padding: 0 18px 0 10px;
text-shadow: #fff 0 1px 1px;
background: red;
text-align: center;
text-decoration: none;
margin-left: 2px;
}
.header-menu-list a:hover { background: pink; }
.header-menu-list .arrow {
position: absolute;
width: 7px;
height: 5px;
top: 22px;
right: 9px;
background: black;
}
.header-menu-list.last {
width: 151px;
}
.header-menu-list.last a {
background: yellow;
color: #fff;
text-shadow: #4b4b4b 0 1px 1px;
width: 123px;
}