JSFiddle - React, Tailwind, and code Playground
HTML
<div id='my-div'></div>
CSS
#my-div {
height: 300px;
width: 300px;
background:green;
transition: all 0.5s ease-in-out;
display: block;
margin: auto;
/*to vertically align*/
position: relative;
top: 50%;
-webkit-transform: translateY(-50%) rotate(0deg);
transform: translateY(-50%) rotate(0deg);
}
JavaScript
var angle = 360;
$('#my-div').click(function() {
$(this).css({
'-webkit-transform' : 'translateY(-50%) rotate('+angle+'deg) ',
'transform' : 'translateY(-50%) rotate('+angle+'deg)'
});
angle += 360;
});