JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="top_menu">
    <ul class="black_high">
        <li class="first active"> <a href="#">Home</a>

        </li>
        <li> <a href="#">news</a>

        </li>
    </ul>
</nav>

CSS

.top_menu ul {
    background: #596064;
    display:inline-block;
    margin:0;
}
.top_menu ul li {
    float:left;
    list-style:none;
    text-align:center;
    padding:10px 0;
    position:relative;
    margin: 0 2rem;
}
.top_menu ul li a {
    color:red;
    text-decoration:none;
}
.top_menu ul li:hover {
    background:#abafb1;
    color:white;
}
.top_menu ul li:hover a {
    background:#abafb1;
    color:white;
}

.top_menu ul li.active a::after {
	position: absolute;
	bottom: 8px;
	left: 0;
	width: 100%;
	height: 2px;
	transform:none;
 
	content: '';
	opacity: 1;
		background: #fff;
  	background: linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);
	background: -moz-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);
	background: -webkit-gradient(left, transparent 0%,#fff 50%,transparent 100%);
}