JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<div id="elOne">
</div>
<div id="elTwo">
</div>
<div id="elThr">
</div>
<div id="elFou">
</div>
<div id="elFiv">
</div>
<div id="elSix">
</div>

CSS

div {
    background:#333;
    height:50px;
    width: 50px;
    position:absolute;
    top:0px;
    left:0px;
}
#elOne {background:#ffff00;opacity:.9;/*yellow*/}
#elTwo {background:#ff00c7;opacity:.9;/*fuscia*/}
#elThr {background:#00ffff;opacity:.9;/*cyan*/}
#elFou {background:#ff6e00;opacity:.9;/*orange*/}
#elFiv {background:#00ff00;opacity:.9;/*green*/}
#elSix {background:#6400ff;opacity:.6;/*purple*/}

JavaScript

//trippin' colors  
  function animate(){
        $('#elOne').delay(300).fadeIn(400).delay(1000).fadeOut(1000);
        $('#elTwo').delay(200).fadeIn(1000).delay(100).fadeOut(800);
        $('#elThr').delay(400).fadeIn(800).delay(500).fadeOut(300);
        $('#elFou').delay(500).fadeIn(700).delay(300).fadeOut(300);
        $('#elFiv').delay(600).fadeIn(300).delay(400).fadeOut(800);
        $('#elSix').delay(700).fadeIn(1000).delay(100).fadeOut(10000);
    }
    animate();  
    setInterval(animate, 600);