JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navbar">
    <ul>
    <li><a href="#" class="current">Home</a></li>	
    <li><a href="#">About Us</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact Us</a></li>    
    <li><a href="#">Login</a></li>
    </ul>
    </div>

CSS

#navbar
{
	width : auto;
	height : 80px;
/*	border: 1px solid gray;*/
	margin:15px 0px 0px 0px;
	float:left;
}

#navbar ul
{
	margin:0px;
	padding:0px;
	display:inline;
}

#navbar ul li
{
	list-style:none;
	float:left;
	display:inline;
	
}

#navbar ul li a {
	float:left;
	display:inline;
	font-family:arial;
	font-size:16px;
	font-weight:bold;
	color:#505050;
	margin: 20px 10px 0px 10px ;
	padding : 5px;
/*	background : #C84A30;*/
	width : 90px;
	text-align:center;
	border-radius:3px;
	text-decoration:none;
}

#navbar ul li a:hover
{
	background : #C84A30;
	color:white;
}

#navbar ul li a.current {
	background : #1D78B8;
	color:white;

JavaScript

$(document).ready(function(){
    $("#navbar ul li a").not("#navbar ul li a.current").hover(function() { 
$(this).animate({ backgroundColor: "#C84A30" }, 250); 
	 
    }, function() {
    $(this).animate({ backgroundColor: "transparent" }, 300); 
    });
	
  })