JSFiddle - React, Tailwind, and code Playground

by Elguja Bogveradze

HTML

<div id="bounce">I CAN'T STOP</div>

CSS

div
{
     text-align:center;
    vertical-align:middle;
    line-height:400px;
    width:400px;
    height:400px;
    border:25px solid darkgreen;
 
    box-shadow: inset 0px 0px 50px 0px #ABABAB,5px 5px 5px 1px #242424;
-webkit-box-shadow: inset 0px 0px 50px 0px #ABABAB,5px 5px 5px 1px #242424;
-moz-box-shadow: inset 0px 0px 50px 0px #ABABAB,5px 5px 5px 1px #242424;
-o-box-shadow: inset 0px 0px 50px 0px #ABABAB,5px 5px 5px 1px #242424;
}

JavaScript

rgb = function rgb() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

setInterval(function(){
var rand1 = Math.floor(Math.random() * 5000)+0;
var rand2 = Math.floor(Math.random() * 5000)+0;
var rand3 = Math.floor(Math.random() * 5000)+0;
var rand4 = Math.floor(Math.random() * 5000)+0;
var rand5 = Math.floor(Math.random() * 50)+10;    
var rand6 = Math.floor(Math.random() * 900)+0;      
var rand7 = Math.floor(Math.random() * 10);     
var arr =[460,470,480,490,495,496,497,498,499,500];
var rand8 = Math.floor(Math.random() * 25)+10;   
 var randtext =rand1+'px '+rand2+'px '+rand3+'px '+rand4+'px/'+rand4+'px '+rand3+'px '+rand2+'px '+rand1+'px';
 //rand1+'px '+rand1+'px '+rand1+'px '+rand1+'px/'+rand1+'px '+rand1+'px '+rand1+'px '+rand1+'px; '
    //rand1+"px "+rand1+"px "+rand1+"px "+rand1+"px"
    
$("div#bounce").css("-webkit-border-radius",randtext);
$("div#bounce").css("font-size",rand5+"px");
$("div#bounce").css("font-weight",rand6);
$("div#bounce").css("width",arr[rand7]+"px");
$("div#bounce").css("height",arr[rand7]+"px");
$("div#bounce").css("line-height",arr[rand7]+"px");    
$("div#bounce").css("border",rand8+"px solid "+rgb());
$("div#bounce").css("color",rgb());
$("div#bounce").css("background-color",rgb());
    

},100);