JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div id="block-menu">
<ul class="menu">


    <li><a class="anim-middleout" href="#">Главная</a></li><!--
 --><li><a class="anim-middleout" href="#">Новости</a></li><!---
 --><li><a class="anim-middleout" href="#">Погода</a></li>




</ul>
</div>

CSS

.menu {
	list-style: none;
	margin-top: 25px;
}
.menu li {
	display: inline;
	padding-right: 25px;
	padding-left: 20px;
}
.menu li a {
	text-decoration: none;
	font-size: 1.2rem;
	font-weight: none;
	color: black;
	padding: 10px;
display: inline-block;

}
.anim-middleout:after {
		content: '';
		display: block;
		width: 0;
		height: 3px;
		background: #34495e;
		margin: auto;
		margin-top: 10px;
		transition: all .5s ease;
}

.anim-middleout.active:after,
.anim-middleout:hover:after {
		width: 100%;
}

JavaScript

$('.anim-middleout').click(function(e) {
  $('.anim-middleout').removeClass('active');
  $(e.target).addClass('active');
});