JSFiddle - React, Tailwind, and code Playground

by Evan Raskob

HTML

<div class="container">
    <div id="info"></div>
    <div id="scale-me">
        <svg>
            <circle cx="150" cy="150" r="50" fill="yellow" stroke="black" />
        </svg>
    </div>
</div>

CSS

.container {
    width:100%;
}
#scale-me {
    width:300px;
    height: 300px;
    margin: 0 auto;
    transition: -webkit-transform 3s ease-out;
    transition: transform 3s ease-out;
}
.end-scale {
    -webkit-transform: scale(2);
    transform: scale(2);
}

JavaScript

//
// scale a circle using css transitions
//

$("#scale-me").click(function () {
    $(this).toggleClass('end-scale');
    $("#info").html("clicked");

});