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: linear-gradient(to top, #0a80bf, #3cb8fa);
	border-radius: 8px 8px 0 0;
	color: #fff;
    padding-top: 15px;
    margin-top: -15px;
}