JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
<a class="one" href="#">Link 1</a>
<a class="two" href="#">Link 2</a>
<a class="three" href="#">Link 2</a>
<a class="four" href="#">Link 2</a>
</div>

CSS

a {
    color: #fff;
    height: 22px;
    padding-bottom: 6px;
}
.one {
    background-color: #00BF26;
}
.two {
    background-color: #0023BF;
}
.three {
    background-color: #FFB300;
}
.four {
    background-color: #FF0000;
}

JavaScript

jQuery(".menu a").mouseenter(function(){
    jQuery(this).stop().animate({
  height: 360, opacity: 0.5
}, 1000, "linear");
});
jQuery(".menu a").mouseleave(function(){
    jQuery(this).stop().animate({
  height: 18, opacity: 1
}, 1000, "linear");
});