JSFiddle - React, Tailwind, and code Playground

HTML

<span class="colored-word">The</span>
<span class="colored-word">Kid</span>
<span class="colored-word">Who</span>
<span class="colored-word">Found</span>
<span class="colored-word">A</span>
<span class="colored-word">basketball</span>

CSS

.colored-word {
    font-weight: bold;
    letter-spacing:9px;
    text-transform:uppercase;
    font-family:arial;
}

JavaScript

$('.colored-word').mouseover(function () {
    $(this).stop(true).fadeTo(200, Math.random());
}).mouseout(function () {
    $(this).fadeTo(200, Math.random());
    var colors = getRandomColors(); 
    $(this)
        .css("color", colors.textColor)
});
var getRandomColors = function() {
    var r = Math.floor(Math.random()*255),
        g = Math.floor(Math.random()*255),
        b = Math.floor(Math.random()*255);
    return {
        textColor: "rgb("+r+","+g+","+b+")",
    };
};
function getContrastYIQ(r, g, b){
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}