JSFiddle - React, Tailwind, and code Playground

HTML

<button color='gray'>
Hello
</button>

JavaScript

var colors=[
['red',7],['yellow',3],['green',2],['gray']
//меняется цвет на красный, через 7 сек меняется на жёлтый, через 3 сек меняется на зелёный, через 2 обратно в первое положение.
];

function start(element){
	step.state=0;step.element=element;
  step();
}

function step(){
  clearTimeout(step.to);
  $(step.element).css('color',colors[step.state][0]);
  if(colors[step.state][1])
  	step.to=setTimeout(step,colors[step.state][1]*1000);
  step.state++;
}

$(function(){var colors = [
    ['red', 7], ['yellow', 3], ['green', 2], ['gray']
//меняется цвет на красный, через 7 сек меняется на жёлтый, через 3 сек меняется на зелёный, через 2 обратно в первое положение.
];

function start(element) {
    step.state = 0;
    step.element = element;
    step();
}

function step() {
    clearTimeout(step.to);
    $(step.element).css('color', colors[step.state][0]);
    if (colors[step.state][1])
        step.to = setTimeout(step, colors[step.state][1] * 1000);
    step.state++;
}

$(function () {
    $(document).on('click', 'button', function () {
        start(this);
    })
})

$(document).on('click','button', function(){

  start(this);

})
})