JSFiddle - React, Tailwind, and code Playground

by nikolya223

HTML

<div class="table style">
  <div class="table-row">
   <div class="random table-cell">
    Крути меня
    
   </div>
  </div>
</div>
<div class="out"></div>

CSS

.random{
    vertical-align: middle;
}
.style{
    transition    : 0.5s ease;
    -webkit-transition    : 0.5s ease;
    -o-transition    : 0.5s ease;
    -moz-transition    : 0.5s ease;  
    width     : 100px;
    height    : 100px;
    background: rgba(000,000,000,1);
    color     : rgba(255,255,255,1);
    cursor    : pointer;
    border    : 2px solid #fff;
    box-shadow: 1px 1px 3px #000;
    text-align    : center;
    user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -webkit-user-select: none;
}
.style:hover{
    background: #3983C6;
}

.table-cell{
    display   : table-cell;
}
.table-row{
    display   : table-row;
}
.table{
    display   : table;
}

.out {
    color: #fff;
    text-shadow: 1px 0px 1px #000;
    width: auto;
    
}

JavaScript

var img   =new Array(
 "http://img0.liveinternet.ru/images/attach/c/6/92/651/92651488_nature_456.jpg", "http://img1.liveinternet.ru/images/attach/c/8/101/908/101908669_wallpapers_26629.jpg", "http://authorstream.s3.amazonaws.com/content/1612526_634903554545780000.jpg");
$(img).each(function(i){
   $new = new Image();
   $new.src=this
   img[i] = $new;
})


$(".random").live("click",function(){
     $min    = 0;
     $max    = img.length-1;
     $random = getRandom($min,$max);  
     $(".out").html($random)
     $("body").css({"background-image": "url('"+img[$random].src+"')"});
     $a = getRandom(0,255);
     $b = getRandom(0,255);
     $c = getRandom(0,255);
     $d = getRandom(0,100);
     $rotate = getRandom(-360,360);
     $radius = getRandom(0,55);
     $borderW = getRandom(0,5);
     $BoxX = getRandom(0,5);
     $BoxY = getRandom(0,5);
     $BoxW = getRandom(0,5);
    $(".style").css({
        "background":"rgba("+$a+","+$b+","+$c+","+$d+")",
        "color"     :"rgb("+(255-$a)+","+(255-$b)+","+(255-$c)+")",
        "-webkit-transform" : "rotate("+$rotate+"deg)",
        "-o-transform"      : "rotate("+$rotate+"deg)",
        "-moz-transform"    : "rotate("+$rotate+"deg)",
        "transform"         : "rotate("+$rotate+"deg)",
        "border-radius"     : $radius+"px",
        "border-width"      : $borderW+"px",
        "box-shadow"        : $BoxX+"px "+$BoxY+"px "+$BoxW+"px #000"
        })
 
})

function getRandom($min,$max){
    $rand =   Math.random()*($max-$min+1);
    $rand =   Math.floor($rand);
    return $rand;
}