JSFiddle - React, Tailwind, and code Playground

by nathanziarek

HTML

<div></div>

CSS

div {
    position: absolute;
    top: 30px;
    left: 30px;
    border-radius: 0px;
    background: #ccc;
    border: #eee 3px solid;
    height: 90px;
    width: 60px;
    -webkit-transition: border-radius 1000ms ease, left 1000ms ease, height 1000ms ease, top 1000ms ease, width 1000ms ease;
    box-shadow: 0 0 30px rgba(90, 120, 255, .5);
}

.change {
    border-radius: 60px;
    left: 200px;
    top: 200px;

    height: 60px
}
body { background: #444 }

JavaScript

$("div").click( change );

setInterval(change, 1000);

function change() {
    w = (Math.random() * 200).toFixed(0) + "px";
    h = (Math.random() * 200).toFixed(0) + "px";
    t = (Math.random() * 200).toFixed(0) + "px";
    l = (Math.random() * 200).toFixed(0) + "px";
    if(Math.random() < .5) {
        css = {
            'border-radius': w,
            height: w,
            width: w,
            top: t,
            left: l
        }
    } else {
        css = {
            'border-radius': 0,
            height: h,
            width: w,
            top: t,
            left: l
        }
    }
    $("div").css(css);
}