JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<div id="bg"></div>

CSS

#bg {
    width: 640px;
    height: 480px;
    border: solid 1px #000;
    background: #fff;
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -ie-transition: background 1s;
    -o-transition: background 1s;
}

JavaScript

// Generate a random background color in the text format "rgba(n, n, n, 0.n)"
function randomColor () {
    var color = [
        (Math.random() * 255 >> 0),
        (Math.random() * 255 >> 0),
        (Math.random() * 255 >> 0),
        (Math.random().toFixed(1))
    ].join(',');
    
    return 'rgba(' + color + ')';
}


// Change the background to a specific color
function changeBackground (color) {
    $('#bg').css('background', color);
}


// Every 2 seconds...
setInterval(function () {
    // Change the background to a random background color
    changeBackground(randomColor());
}, 2000);