JSFiddle - React, Tailwind, and code Playground

by David_Barnett

HTML

<div class="wrapper">
<div class="zort"></div>
<div class="zort"></div>
<div class="zort"></div>
<div class="zort"></div>
</div>

CSS

.wrapper{
 background-color:black;  
     height: 250px;
}
.zort{
    width: 150px;
    height: 150px;
    background-color:red;
    margin: 50px 40px 50px 40px;
    float: left;
     border-radius: 15px 150px 7px 96px;
    -webkit-transform: rotate(7200deg);
    
}
.zort:hover{
    box-shadow: 0px 0px 20px 5px #00ff00;
    cursor: pointer;
     -ms-transform: rotate(-230deg); /* IE 9 */
    -webkit-transform: rotate(-230deg); /* Chrome, Safari, Opera */
     -webkit-transform: rotate(-230deg);
         border-radius: 39px 82px 77px 105px;
    transition-duration: 4s;
     background-color: #AD310B;
    -webkit-transition: background-color 1000ms radial;
    -moz-transition: background-color 1000ms radial;
    -o-transition: background-color 1000ms radial;
    -ms-transition: background-color 1000ms radial;
    transition: background-color 1000ms radial;
}