JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<div class="element"></div>

CSS

.element {
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

.class1 {background-color: red}
.class2 {background-color: green}
.class3 {background-color: blue}
.class4 {background-color: purple}
.class5 {background-color: orange}
.class6 {background-color: black}
.class7 {background-color: white}
.class8 {background-color: gray}
.class9 {background-color: yellow}
.class10 {background-color: brown}

JavaScript

function removeAllClasses() {
    var i;
    for (i = 0; i <= 10; i += 1) {
        $('.element').removeClass('class' + i);
    }
}
function setRandomClass() {
    var cls = "class"+Math.floor(Math.random() * (10 - 1 + 1) + 1);
    $('.element').addClass(cls);
}
$(document).ready(function() {
    removeAllClasses(); // just in case
    setRandomClass();
});
var IS_HOVERING = false;
$('.element').hover(function() {
    IS_HOVERING = true;
}, function() {
    IS_HOVERING = false;
});
function onTimeout() {
    if (IS_HOVERING) {
        removeAllClasses();
        setRandomClass();
    }
    setTimeout(onTimeout, 200);
}
setTimeout(onTimeout, 200);