JSFiddle - React, Tailwind, and code Playground

by lucasprus

HTML

<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>

<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
<button id="btn1">Animate</button>
<button id="btn2">Reset</button>

CSS

div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotate(300deg);
-ms-transform:rotate(300deg); /* IE 9 */
-moz-transform:rotate(300deg); /* Firefox */
-webkit-transform:rotate(300deg); /* Safari and Chrome */
-o-transform:rotate(300deg); /* Opera */
    
position:absolute;
top:100px;
left:100px; 
text-indent: 90px;
}

JavaScript

$(document).ready(function() {
    $("#btn1").click(function() {
        $("#box").animate({
            height: "300px"
        });
    });
    $("#btn2").click(function() {

        $('#div2').animate({
            textIndent: 0
        }, {
            step: function(now, fx) {
                $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
            },
            duration: 'slow'
        }, 'linear');


    });





});