JSFiddle - React, Tailwind, and code Playground

by IllusionMH

HTML

<div id="d1"></div>
<div id="d2"></div>

CSS

#d1 {
    position: absolute;
    width: 200px;
    height: 200px;
    background: gray;
    -webkit-transform: translateX(100px) translateY(100px) rotate(45deg);
    transform: translateX(100px) translateY(100px) rotate(45deg);
}
#d1:hover {
    background: red;
}
#d2 {
    position: absolute;
    width: 100px;
    height: 100px;
    background: gray;
    -webkit-transform: translateX(50px) translateY(50px) rotate(45deg);
    transform: translateX(50px) translateY(50px) rotate(45deg);
}
#d2:hover {
    background: blue;
}