JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="mini-nav">
<ul>
<li><a href="#">:</a></li>
<li><a href="#home-section">Home</a></li>
<li class="mini-current"><a href="#about-section">About</a></li>
<li><a href="#portfolio-section">Portfolio</a></li>
<li><a href="#testimonials-section">Testimonials</a></li>
<li><a href="#contact-section">Contact</a></li>
</ul>
</nav>

CSS

.mini-nav {
 margin-right: 50px;
 margin-top: 40px;
 z-index: 51;
 float: right;}
 
.mini-nav ul {
margin-top: 0px;
height: 30px;
text-align: center; /* set value to "left", "center", or "right" to align menu accordingly */ 
}

.mini-nav li { 
 list-style-type: none;
 float: left;
 text-align: center;
 font-size: 13px;
 height: 100px;
 line-height: 30px;
 margin-top: 0px;
 font-family: 'Droid Sans', sans-serif;
 }

.mini-nav a {
 text-decoration: none;
 display: block;
 margin-top: 0px;
 margin-right: 5px;
 color: white;
 text-shadow: 1px 1px 3px #2e2a2e;
filter: dropshadow(color=#2e2a2e, offx=1, offy=1);
 padding: 0px 15px 0px 15px; /* padding of the 4 sides of each menu link */
 -webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background-color: rgba(29, 29, 29, 0.20);
}

/* .mini-nav a:hover {
background-color: rgba(29, 29, 29, 0.50);
color: white;
text-shadow: 2px 2px 3px #1f1d1f;
filter: dropshadow(color=#1f1d1f, offx=2, offy=2); 
}  (what I was using before) */

.hover {
background-color: rgba(29, 29, 29, 0.50);
color: white;
text-shadow: 2px 2px 3px #1f1d1f;
filter: dropshadow(color=#1f1d1f, offx=2, offy=2); 
}
 
.mini-current a{
background-color: rgba(29, 29, 29, 0.40);
}

.mini-nav li:first-child a{
font-family: 'WebSymbolsRegular';
font-size: 14px;
background-color:transparent;
}

.mini-nav li:first-child a:hover {
font-size: 17px;
color: white;
}

.hover { background-color: #000 !important}

JavaScript

$(document).ready(function() {
    $(".mini-nav li a").hover(function () {

    $(this).addClass("hover").fadeIn("slow");
    },function () {
    
    $(this).removeClass("hover").fadeIn("fast");
        
    });
});