JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.colored-word {
    border: solid 1px green;
    font-weight: bold;
}

JavaScript

$('.colored-word').mouseover(function () {
    $(this).stop(true).fadeTo(200, Math.random());
}).mouseout(function () {
    $(this).fadeTo(200, Math.random());
    var colors = getRandomColors(); 

    $(this)
        .css("background", colors.background)
        .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 {
        background: "rgb("+r+","+g+","+b+")",
        textColor: getContrastYIQ(r, g, b)
    };
};

function getContrastYIQ(r, g, b){
	var yiq = ((r*299)+(g*587)+(b*114))/1000;
	return (yiq >= 128) ? 'black' : 'white';
}