JSFiddle - React, Tailwind, and code Playground

by NickU

HTML

<!DOCTYPE html>
<div id="r1" class='b_rotate1'>
</div>

<div id="r2" style='color:red;' class='b_rotate2'>
</div>

CSS

.b_rotate1
{
    cursor: pointer;
    vertical-align: middle;
    border: 1px solid rgba(55, 55, 55, 0.35);
    border-radius: 50%;
    opacity: 0.85;
    height: 14px;
    width: 14px;
    padding: 1px;
    display: inline-block;
    outline: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background:  linear-gradient(rgba(255,0,0,0.2), rgba(255,0,0,0.25)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' width='14' height='14' %3E%3Cpath d='m 12,3 c 4.9706,0 9,4.02944 9,9 0,3.0777 -1.5593,5.865 -4.0231,7.5009 L 18.75,19.5 c 0.4142,0 0.75,0.3358 0.75,0.75 0,0.3797 -0.2822,0.6935 -0.6482,0.7432 L 18.75,21 h -4 c -0.3797,0 -0.6935,-0.2822 -0.7432,-0.6482 L 14,20.25 v -4 c 0,-0.4142 0.3358,-0.75 0.75,-0.75 0.3797,0 0.6935,0.2822 0.7432,0.6482 L 15.5,16.25 15.501,18.635 C 17.9241,17.3557 19.5,14.8247 19.5,12 19.5,7.85786 16.1421,4.5 12,4.5 7.85786,4.5 4.5,7.85786 4.5,12 4.5,12.4142 4.16421,12.75 3.75,12.75 3.33579,12.75 3,12.4142 3,12 3,7.02944 7.02944,3 12,3 Z'%3E%3C/path%3E%3C/svg%3E") no-repeat center ;
    }
    
    
 .b_rotate2
{
    cursor: pointer;
    vertical-align: middle;
    border: 1px solid rgba(55, 55, 55, 0.35);
    border-radius: 50%;
    opacity: 0.85;
    height: 14px;
    width: 14px;
    padding: 1px;
    display: inline-block;
    outline: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' width='14' height='14' %3E%3Cpath d='m 12,3 c 4.9706,0 9,4.02944 9,9 0,3.0777 -1.5593,5.865 -4.0231,7.5009 L 18.75,19.5 c 0.4142,0 0.75,0.3358 0.75,0.75 0,0.3797 -0.2822,0.6935 -0.6482,0.7432 L 18.75,21 h -4 c -0.3797,0 -0.6935,-0.2822 -0.7432,-0.6482 L 14,20.25 v -4 c 0,-0.4142 0.3358,-0.75 0.75,-0.75 0.3797,0 0.6935,0.2822 0.7432,0.6482 L...

JavaScript

setTimeout(function(){
 $('#r1').css({
                transition: "transform 1s",
                transform: "rotate(180deg)"
            });
            }, 1000);
            
setTimeout(function(){
             $('#r1').css({
                transition: "transform 1s",
                transform: "rotate(270deg)"
            });
            }, 1500);