JSFiddle - React, Tailwind, and code Playground

by WOUNDEDStevenJones

HTML

<div class="circle">
    <div id="circle1"></div>
    <div id="circle2"></div>
    <div id="circle3"></div>
    <div id="circle4"></div>
</div>

CSS

.circle {
    width: 100px;
    height: 100px;
    
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
     
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}
.circle:hover {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}

#circle1, #circle2, #circle3, #circle4 {
    width: 50px;
    height: 50px;
}
#circle1 {
    border-top-left-radius: 50px;
    background-color: #f00;
    float: left;
}
#circle2 {
    border-top-right-radius: 50px;
    background-color: #0f0;
    float: left;
}
#circle3 {
    border-bottom-left-radius: 50px;
    background-color: #00f;
    clear: both;
    float: left;
}
#circle4 {
    border-bottom-right-radius: 50px;
    background-color: #ff0;
    float: left;
}