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/">
           <span class="page-item-background"></span>
           <span class="page-item-text">главная страница</span>
         </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/"><span class="page-item-background"></span><span class="page-item-text">О нас</span></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/"><span class="page-item-background"></span><span class="page-item-text">Юридические новости</span></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/"><span class="page-item-background"></span><span class="page-item-text">Полезные сервисы</span></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/"><span class="page-item-background"></span><span class="page-item-text">контакты</span></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;
  list-style: none;
	margin: 0px;
	padding: 0px;
}

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


.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: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 .page-item-text{
	color: #1292ce;
	font-size: 16px;
}

.menu li a{
	text-decoration: none;
}

.menu li a .page-item-text{
	color: #fff;
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 600;
	transition: 0.5s;
  z-index: 10;
  position: relative;
}

.page-item-background{
  position: absolute;
  display: block;
  transition: 0.5s;
  background-color:#eee;
  top:0;
  bottom:0;
  left: 50%;
  /*transform: translate(-50%,0) ;*/
  right:50%;
  z-index: 2;
}

.menu li:hover .page-item-background{
  left: 0;
  right: 0;
  /*transform: translate(0,0) ;*/
}