JSFiddle - React, Tailwind, and code Playground

HTML

<menu>
		<ul id="top-menu">
			<li><a href="#">О компании</a></li>
			<li><a href="#">Проектирование</a></li>
			<li><a href="#">Поставки</a></li>
		</ul>
	</menu>

CSS

menu {
	height: 48px;
	font-family: 'Cuprum', sans-serif;
	font-weight: bold;
	font-size: 16px;
	background: linear-gradient(to top, #d7d7d7, #f0f0f0);
	border: 1px solid #cecece;
	border-radius: 8px;
}

#top-menu {
	float: left;
	position: relative;
	left: 50%;
}

#top-menu li {
	float: left;
	list-style: none;
	background: url(../images/separator.png) left no-repeat;
	line-height: 50px;
	position: relative;
	right: 50%;
}

#top-menu a {
	color: #666565;
	display: block;
	padding: 0 27px;
	text-decoration: none;
}

#top-menu li:first-child {
	background: none;
}

#top-menu a:hover {
	background: #207cca; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: background: #207cca;
background: -moz-linear-gradient(top,  #207cca 0%, #207cca 3%, #35b2cc 18%, #207cca 36%, #207cca 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#207cca), color-stop(3%,#207cca), color-stop(18%,#35b2cc), color-stop(36%,#207cca), color-stop(100%,#207cca));
background: -webkit-linear-gradient(top,  #207cca 0%,#207cca 3%,#35b2cc 18%,#207cca 36%,#207cca 100%);
background: -o-linear-gradient(top,  #207cca 0%,#207cca 3%,#35b2cc 18%,#207cca 36%,#207cca 100%);
background: -ms-linear-gradient(top,  #207cca 0%,#207cca 3%,#35b2cc 18%,#207cca 36%,#207cca 100%);
background: linear-gradient(to bottom,  #207cca 0%,#207cca 3%,#35b2cc 18%,#207cca 36%,#207cca 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#207cca', endColorstr='#207cca',GradientType=0 );


	border-radius: 8px 8px 0 0;
	color: #fff;
    padding-top: 15px;
    margin-top: -15px;
}