JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainmenu">
			<ul class="menumain">
            	<li><a href="#">Мамочка</a></li>
                <li><a href="#">Ребенок</a></li>
                <li><a href="#">Развитие</a></li>
			</ul>
		</div>

CSS

* {margin:0;padding:0;}
.mainmenu {
	float:left;
	background: #3e80b2;
	height:40px;
}

.menumain li {
	float:left;
	font:20.83px "Exo 2";
    list-style: none;
    border-right: 1px solid red;
    line-height:40px;
    padding: 0 15px;
}
.menumain li:last-child {
    border-right:none;
}

.menumain li a{
	color: white;
	text-decoration:none;
}
.menumain li:hover{
	background:#5b9bc8;
}