JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="inner"></div>
</div>

<div class="outer animating">
    <div class="inner"></div>
</div>

CSS

.outer {
    border: 10px solid green;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
}

.inner {
    background: red;
    position: absolute;
    width: 100px;
    height: 100px;
    
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}


.inner:hover {
background: blue;                
}

.animating:hover .inner {
     -webkit-transform: rotate(70deg);
    -moz-transform: rotate(70deg);
    -o-transform: rotate(70deg);
    -ms-transform: rotate(70deg);
    transform: rotate(70deg);
}