JSFiddle - React, Tailwind, and code Playground

HTML

<body id="color"></body>

CSS

@import url('http://necolas.github.io/normalize.css/3.0.2/normalize.css');

/*General*/
body {
    max-width: 980px;
    margin: 50px auto;
    padding: 0 20px;
}

#color div {
    width: 50px;
    height: 50px;
    display: inline-block;
    border-radius: 50%;
    margin: 5px;
    /*THIS TRANSITION IS A CATCH ALL FOR ANY CHANGES*/
    transition: all 0.2s;
}

#color div:hover {
    border-radius: 0;
    box-shadow: 0px 8px 6px -4px rgba(0, 0, 0, 0.3);

}

JavaScript

var html = '';
var red;
var green;
var blue;
var rgbColor;


for  ( var i = 0; i < 10; i += 1 ) {
    red = Math.floor(Math.random() * 256 );
    green = Math.floor(Math.random() * 256 );
    blue = Math.floor(Math.random() * 256 );
    rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
    html += '<div style="background-color:' + rgbColor + '"></div>';

}

document.querySelector("body").innerHTML = html;