JSFiddle - React, Tailwind, and code Playground

HTML

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

<div class="wrap2"></div>

CSS

.wrap {
    width: 100px;
    height: 100px;
    transition: transform 1s linear;
}
.inner {
    width: 100%;
    height: 100%;
    background: red;
    transition: transform 2s linear;
}

 .wrap2 {
    
     left: 200px;
     top: 0px;
    width: 100px;
    height: 100px;
    background: blue;
    transition: transform 2s linear;
}

.wrap:hover .inner,.wrap:hover + .wrap2{
    transform: rotate(45deg);
}