JSFiddle - React, Tailwind, and code Playground

by Shidhin C R

HTML

<div id="color" class="color"></div>

CSS

.color {
    width: 200px;
    height: 200px;
    border:2px solid black;
    background-color: rgba(255,255,255,0.5);
}

JavaScript

setInterval((function(r,g){
    var roffset=-1,goffset=1;
    return function(){
       
        if(r == 255 ){
            roffset = -1;
        }
        if(r == 0 ){
            roffset = 1;            
        }
        if(g == 255 ){
            goffset = -1;
        }
        if(g == 0){
            goffset = 1;            
        }
        
        r = r + roffset;
        g = g + goffset;
       document.getElementById('color').style.backgroundColor = "rgba("+r+","+g+",255,0.5)";        
    }
    
}(255,0)),50)