JSFiddle - React, Tailwind, and code Playground

by JamesD

HTML

<figure>Hello, world!</figure>

CSS

figure {
    display:block;
    margin:0;
    border-radius:50%;
    background:#f00;
    width:200px;
    height:200px;
    line-height:200px;
    text-align:center;
    transition:0.5s;
}

figure:hover {
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    transform:rotate(-90deg);
}

figure.rotated, figure.rotated:hover {
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    transform:rotate(90deg);
}

JavaScript

$('body').on('click', 'figure', function() {
    $(this).toggleClass('rotated');
});