JSFiddle - React, Tailwind, and code Playground

by ghayes

HTML

<div class="what">
    <div class="hi">
        <div class="hello">
            Hello
        </div>
    </div>
</div>

CSS

.hello {
  margin: 200px auto;
  width: 100px;  
  !background-color:red;
}

.hi { !background-color:aqua; }
.what { !background-color:blue; }

.hello.spin {
  -webkit-transition: all 1s ease-in-out;
  -webkit-transform: rotate(-90deg);  
}

.hi.spin {
  -webkit-transition: all 1.5s ease-in-out;
  -webkit-transform: rotate(180deg);  
}

.what.spin {
  -webkit-transition: all 2s ease-out;
  -webkit-transform: rotate(-90deg);  
}

JavaScript

$('.hello').click(function() {
   $(this).toggleClass('spin'); 
   $(this).parent().toggleClass('spin'); 
   $(this).parent().parent().toggleClass('spin'); 
});