JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<span class="hfs">test1</span>
<span class="hfs">test2</span>

CSS

.hoverfadeMO
{    
    opacity:0.3;
    filter:alpha(opacity=30);
}
.hoverfade
{
    background-color:none;
    
    opacity:1;
    filter:alpha(opacity=100);
}

JavaScript

$(function ()
{
    $('.hfs').each(function ()
    {
        $(this).addClass('hoverfade');
        $(this).hover (function ()
        {
            if ($(this).is('.hoverfade'))
                $(this).switchClass('hoverfade','hoverfadeMO',100);
            else
                $(this).switchClass('hoverfadeMO','hoverfade',100);
        });
    });
});