JSFiddle - React, Tailwind, and code Playground

by loktar

HTML

<div id="testElement">Im a test element for testing OMG!!!!?!</div>

CSS

.color1{
    background: yellow;
}

.color2{
    background: red;
    color: white;
}

.color3{
    background: blue;
    color: white;
}

.color4{
    background: green;
}

JavaScript

function changeColor(element, curNumber){
    curNumber++;

    if(curNumber > 4){
        curNumber = 1;
    }
    console.log(curNumber);
    element.addClass('color' + curNumber, 500);
    // So previous classes get removed.
    element.attr('class', 'color' + curNumber);
    setTimeout(function(){changeColor(element, curNumber)}, 1000);  
}

changeColor($('#testElement'), 0);