JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test"></div>

<p id="p"></p>

CSS

div#test {width:100px; height:100px;}

JavaScript

var datos=[["rojo","red"],["verde","green"],["azul","blue"],["amarillo","yellow"]];
var resto = datos.slice(0);
var div = document.getElementById("test");

var p = document.getElementById("p");

function cambiar(i){
    i=(i+Math.floor(Math.random()*(resto.length-1)+1))%resto.length;
    if(div.style.background.indexOf(resto[i][1]) < 0) {
        div.style.background = resto[i][1];
        div.innerHTML=resto[i][0];
        p.innerHTML += resto[i][0] + "<br />";
        resto.splice(i,1);
        setTimeout(function(){cambiar(i);},1000);
        if(resto.length === 0) {
           resto = datos.slice(0);       
           p.innerHTML += "---------------<br />";
        }
    } else {
       cambiar(0);        
    }        
}
        
cambiar(0);