JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block-menu">
		<ul class="menu-top">
			<li><a href="#glavnaya">Главная</a></li>
			<li><a href="#o-nas">О нас</a></li>
			<li><a href="#otzivy">Отзывы</a></li>
			<li><a href="#contacts">Контакты</a></li>
		</ul>
	</div>

CSS

.block-menu{
	height: 40px;
	width: 800px;
	background-color: #18a951;
	box-shadow:0px 0px 11px 2px #000000;
}
.menu-top li{
display: inline-block;
}

.menu-top li a{
	text-decoration: none;
	display: inline-block;
	width: 200px;
	height: 40px;
	text-align: center;
	color: black;
	font-size: 29.17px;
	font-family: Arial;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 10px;

}
.menu-top li a:hover{
	background-color: #6cf1a0;
	color: white;
}