JSFiddle - React, Tailwind, and code Playground

HTML

<body>
 
 <div class="menu-wrap">
   <nav class="top-menu"><ul id="primary-menu" class="menu"><li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-8 current_page_item menu-item-15"><a href="http://lawyer/">главная страница</a></li>
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="http://lawyer/%d0%be-%d0%bd%d0%b0%d1%81/">О нас</a></li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://lawyer/%d1%8e%d1%80%d0%b8%d0%b4%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d0%bd%d0%be%d0%b2%d0%be%d1%81%d1%82%d0%b8/">Юридические новости</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="http://lawyer/%d0%bf%d0%be%d0%bb%d0%b5%d0%b7%d0%bd%d1%8b%d0%b5-%d1%81%d0%b5%d1%80%d0%b2%d0%b8%d1%81%d1%8b/">Полезные сервисы</a></li>
<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="http://lawyer/%d0%ba%d0%be%d0%bd%d1%82%d0%b0%d0%ba%d1%82%d1%8b/">контакты</a></li>
</ul></nav>                   
  </div>
  </body>

CSS

body{
  background:#1a2b3a;
}
.menu-wrap{
	width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 150px;
}

.menu{
	display: flex;
	margin: 0px;
	padding: 0px;
}

.menu li{
	padding: 30px;
	list-style: none;
	background: #eee;
	border-right: 1px solid #187faf;
	transition: 0.3s;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.menu li::before{
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background: #1292ce;
	left: 0;
	top: 0;
	display: block;
	z-index: -1;
	/*transition: 0.3s;*/
}

.menu li:hover:before{
	left: -100%;
	z-index: 1;
	transition: 0.5s;
}

.menu li::after{
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background: #1292ce;
	right: 0;
	top: 0;
	display: block;
	z-index: -1;
	/*transition: 0.3s;*/
}

.menu li:hover:after{
	right: -100%;
	z-index: 1;
	transition: 0.5s;
}

.menu li:first-child{
	border-radius: 30px 0 0 0;
}

.menu li:last-child{
	border-radius: 0px 30px 0 0;
	border-right: none;
}

.menu li:hover a{
	color: #1292ce;
	font-size: 16px;
}

.menu li a{
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 600;
	transition: 0.5s;
}