JSFiddle - React, Tailwind, and code Playground

by Evan Raskob

HTML

<div class="container">
    <div id="info"></div>
    <div id="rotate-me">
        <svg>
            <rect x="100" y="100" width="100" height="100" fill="yellow" stroke="black" />
        </svg>
    </div>
</div>

CSS

.container {
    width:100%;
}
#rotate-me {
    width:300px;
    height: 300px;
    margin: 0 auto;
    border: dotted black 1px;
    transition: -webkit-transform 3s ease-out;
    transition: transform 3s ease-out;
}
.end-rotate {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

JavaScript

//
// rotate a square using css transitions
//

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

});