JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cycle green yellow">Я меняю цвет</div>

CSS

div {
    padding: 30px;
    color: black;
}
.yellow {
    background: yellow;
    color: green;
}
.green {
    background: green;
    color: yellow;
}
.blue {
    background: blue;
    color: white;
}

JavaScript

var arrD = ["yellow", "green", "blue"];
var t = cycleClass(document.querySelector('div'), arrD, 500);
document.addEventListener('mousedown', function () {
    clearTimeout(t);
});
document.addEventListener('mouseup', function () {
    t = cycleClass(document.querySelector('div'), arrD, 500)
});

function cycleClass(element, list, time) {
    var i = -1;
    var c = element.classList;
    for (var n = 0; n < list.length; n++) {
        if (c.contains(list[n])) {
            if (i != -1) c.remove(list[i]);
            i = n;
        }
    }
    return setInterval(function () {
        c.remove(list[i++]);
        c.add(list[i %= list.length]);
    }, time);
}