JSFiddle - React, Tailwind, and code Playground

HTML

<div id="logo">
    <div id="logo_back">
    </div>
</div>

CSS

#logo { width: 100px; height: 100px; border: 1px solid black; }
#logo_back { width: 100%; height: 100%; }

JavaScript

var mouseOver = false;
function pixelColors() {
    if (mouseOver) {
    var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ')';
    $('#logo_back').animate({
        backgroundColor: color
    }, 2000, pixelColors);
    }
}

$(document).ready(function() {

    $("#logo").bind('mouseenter', function() {
        mouseOver = true;
        pixelColors();
    });


    $("#logo").bind('mouseleave', function() {
        mouseOver = false;
    });

});