JSFiddle - React, Tailwind, and code Playground

by Kate Masiuk

HTML

<div class="hd-menu">
					
<div><em><a href="#" class="current">Главная</a></em></div>
<div><em><a href="#">О компании</a></em></div>
<div><em><a href="#">Прайс-лист</a></em></div>
<div class="spoiler"> <em><a href="#">Каталог</a></em></div>
<div><em><a href="#">Вакансии</a></em></div>
<div><em><a href="#">Контакты</a></em></div>
					
</div>

CSS

body {
    background: #666;    
}

.hd-menu div{
font-size: 18px;
font-family: HeliosCondLight;
font-variant: small-caps;
line-height: 25px;
font-weight: bold;
background: linear-gradient(to bottom, #fff 50%, #838383 60%);
background: -webkit-linear-gradient(to bottom, #fff 50%, #838383 60%);
background: -moz-linear-gradient(to bottom, #fff 50%, #838383 60%);
background: -ms-linear-gradient(to bottom, #fff 50%, #838383 60%);
background: -o-linear-gradient(to bottom, #fff 50%, #838383 60%);
-webkit-background-clip: text;
color: transparent;
display: inline-block;
width: 55px;
}

.hd-menu div a {color: transparent;} /*по сути есть подчеркивание, но color transparent всё портит*/

.hd-menu div:nth-of-type(2), .hd-menu div:nth-of-type(3) {width: 85px;}
.hd-menu div:nth-of-type(2) {margin-left: 40px;}
.hd-menu div:nth-of-type(3) {margin-left: 20px;}
.hd-menu div:nth-of-type(4) {padding: 0 15px;text-align: center;width: 70px;}
.hd-menu div:nth-of-type(5) {width: 66px;margin-left: 10px;}
.hd-menu div:nth-of-type(6) {width: 66px;margin-left: 30px;}

.hd-menu  {margin-left: 166px;margin-top: 20px;}

.hd-menu a.current {
border-radius: 2px;
line-height: 20px;
background: linear-gradient(to bottom, #fff 50%, #838383 60%);
background: -webkit-linear-gradient(to bottom, #fff 50%, #838383 60%);
background: -moz-linear-gradient(to bottom, #fff 50%, #838383 60%);
background: -ms-linear-gradient(to bottom, #fff 50%, #838383 60%);
background: -o-linear-gradient(to bottom, #fff 50%, #838383 60%);
color: #343434;
display: block;
text-decoration: none;
padding: 0 10px;
width: 55px;
margin-right: 20px;
}

.hd-menu div.spoiler:hover a {
color: #194460;
background: #fff;
display: block;
text-decoration: none;
width: 70px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
text-align: center;
}