JSFiddle - React, Tailwind, and code Playground

by chadocat

HTML

<div id="box-shadow"></div>
<div id="box"></div>

CSS

#box, #box-shadow {
    width:200px;
    height:200px;
    position:absolute;
    top:50px;
    left:50px;
    -moz-transform:rotate(345deg);
    -webkit-transform:rotate(345deg);
    -o-transform:rotate(345deg);
    -ms-transform:rotate(345deg);
}
#box-shadow {
    background-color:silver;
}
#box {
    background-color:orange;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

JavaScript

$(function () {

    var isScaled = false;

    $('#box').on('click', function () {

        if (isScaled) {
            isScaled = false;
            $(this).width('200').css({'top':'50px','left':'50px'})
        } else {
            isScaled = true;
            $(this).width('400').css({'top':'24px','left':'46px'});

        }


    })
});