JSFiddle - React, Tailwind, and code Playground

by nicholasstephan

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.js"></script>
<div class="somediv"></div>

<button class="movedown">move down</button>
<button class="moveright">move right</button>
<button class="rotate">rotate</button>
<button class="addshadow">add shadow</button>
<button class="animateshadow">animate shadow</button>
<button class="borderradius">animate border radius</button>

CSS

.somediv {
    background-color:green;
    width:100px;
    height:100px;
}

JavaScript

$(".movedown").click(function() {
    $(".somediv").css({
        'y': '+=20px'
    });
});
    
$(".moveright").click(function() {
    $(".somediv").css({
        'x': '+=20px'
    });
});

$(".rotate").click(function() {
    $(".somediv").css({
        'rotate': '+=45deg'
    });
});

$(".addshadow").click(function() {
    $(".somediv").css({
        'box-shadow': '2px 2px 4px #000000'
    });
});
    
$(".animateshadow").click(function() {
    $(".somediv").transition({
        'box-shadow': '20px 20px 10px #000000'
    });
});

$(".borderradius").click(function() {
    $(".somediv").transition({
        'border-radius': '5px'
    });
});