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(true,true).addClass("active", 1000);
    }, function() {
        $(this).stop(true,true).removeClass("active", 100);
    });

});