JSFiddle - React, Tailwind, and code Playground

by robaldred

HTML

<div id="box">
    <p>Woooooo</p>
</div>

CSS

#box {
    position:relative; 
    background:black;
    overflow:hidden;
    color:white;
    top:100px;
    left:100px;
    width:50px;
    height:50px;
}

JavaScript

$(function() {


    $("#box").mousedown(function() {
        $(this).css({
            width: "300px",
            height: "100px"
        });
        $(this).effect("scale", {
            origin: [100, 100],
            from: {
                width: 50,
                height: 50
            },
            percent: 100,
            easing: "easeOutBounce",
            queue: true
        }, 300);
    }).mouseup(function() {
        $(this).animate({
            width: 50,
            height: 50
        }, {
            duration: 100,
            queue: true
        });
    });
    $("#box").draggable({
        delay: 300
    });

});