JSFiddle - React, Tailwind, and code Playground

by Tilwin Joy

HTML

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

CSS

.color0 {
    background: yellow;
}
.color1 {
    background: red;
    color: white;
}
.color2 {
    background: blue;
    color: white;
}
.color3 {
    background: green;
}
.color4 {
    background: dodgerblue;
}

JavaScript

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

    if (curNumber > 4) {
        curNumber = 0;
    }
    console.log(curNumber);
    element.addClass('color' + curNumber, 500);
    element.html(arr[curNumber]);
    // So previous classes get removed.
    element.attr('class', 'color' + curNumber);
    setTimeout(function () {
        changeColorAndText(element, curNumber)
    }, 1000);
}

var arr = ['hi','hello ','how ','are ','you '];                    
changeColorAndText($('#testElement '), 0);