JSFiddle - React, Tailwind, and code Playground

by gregguida

HTML

<div id="image"><div class="tile"></div></div>

CSS

body {
    background:black;
}

#image{
/*    background:url('https://secure.gravatar.com/avatar/c97077509848246a0906b470978a1e04') 0 0 no-repeat transparent;*/
     background:#cAcAdF;
     width:20px; 
     height:20px;
     border-radius: 10px 10px 10px 10px;
    margin:30px;
}
.tile{
   width: 19px;
   height: 19px;
   margin:0;
   padding: 0;
   border: 1px solid rgba(0,0,0,0.5);
   border-radius: 10px 10px 10px 10px;
   /*background: rgba(127,127,127,0.25);*/
   box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
}

JavaScript

/*Random background color- by javascriptkit.com
Visit JavaScript Kit (http://javascriptkit.com) for script
Credit must stay intact for use*/

//Enter list of bgcolors:
//var bgcolorlist=new Array("#DFDFFF", "#FFFFBF", "#80FF80", "#EAEAFF", "#C9FFA8", "#F7F7F7", "#FFFFFF", "#DDDD00")

//document.body.style.background=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]
i=0;
setInterval(function(){
    if (i++%2 == 0) {
     document.getElementById("image").style.background = "#cAcAdF";
    } else {    document.getElementById("image").style.background = "#DDDD00";
    }
},1000)