JSFiddle - React, Tailwind, and code Playground

HTML

<div class="categories">
    <h1><a href="javascript:void(0)" >Category 1</a></h1>
    <h1><a href="javascript:void(0)" >Category 2</a></h1>
    <h1><a href="javascript:void(0)" >Category 3</a></h1>
</div>

CSS

.active { color: red; }
h1 { margin-top: 3px; }
a { text-decoration: none; font-weight: bold;  }

JavaScript

$(function() {
    $(".categories h1 a").hover(function() {
 $(this).stop().animate({ backgroundColor: "#a7bf51"}, 800);
      },function() {
      $(this).stop().animate({ backgroundColor: "#FFFFFF"}, 800);
      });

});