JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<div id="content">
<div id="red1" class="red">
    a
</div>
<div id="red2" class="red">    
    b
</div>
<div id="red3" class="red">    
    c
</div>
<div id="red4" class="red">    
    d
</div>
</div>

CSS

#content{
    margin:100px;

}
.red{    
    background-color:red;
    width:100px;
    height:160px;
    position:absolute;
}

.rotate{
    -webkit-transform: rotate(120deg);
}

#red1{
    -webkit-transform: rotate(0deg);
    top: 160px;
    left: 200px;
}

#red2{
    -webkit-transform: rotate(270deg);
    left: 330px;
    top: 30px;
}

#red3{
    -webkit-transform: rotate(180deg);
    left: 200px;
    top: -100px;
}

#red4{
    -webkit-transform: rotate(90deg);
    left: 70px;
    top: 30px;
}