JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li class="shop"><a href="#">Тут что то важное</a></li>
    <li class="for"><a href="#">Избранное</a></li>
    <li class="up"><a href="#">Сравнение (4)</a></li>        
</ul>

CSS

#menu {width: 100%; margin: 2em;}
#menu li {float: left;position: relative;
margin: 0 1em 0 2em;}
#menu li a {
background: #fff; 
vertical-align: text-top;
-webkit-filter: drop-shadow(0px 2px 7px rgba(0,0,0,0.5));
padding: .3em 2em 1.1em;
float: left;
text-decoration: none;
color: #000;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
position: relative;}

a::before {
left: -1.4em;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-ms-transform: skew(-45deg);
-o-transform: skew(-45deg); 
transform: skew(-45deg);
}
#menu a::before, #menu a::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 2.4em;
background: #fff;
}
#menu a::after {
right: -1.4em;
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
-ms-transform: skew(45deg);
-o-transform: skew(45deg); 
transform: skew(45deg);
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
#menu li:first-child {margin: 0 1em 0 2em;}
#menu li:first-child a {
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;}
#menu li:first-child a::before {display: none;}
#menu li.shop {z-index: 4;}
#menu li.for {z-index: 3;}
#menu li.up {z-index: 2;}