JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.greensock.com/js/src/TweenMax.min.js"></script>
<div class="wrapper">
  <div class="box red b-circul0"></div>
    <div class="box red b-circul1"></div>
    <div class="box red b-circul2"></div>
    <div class="box red b-circul3"></div>
    <div class="box red b-circul4"></div>
    <div class="box red b-circul5"></div>
    <div class="box red b-circul6"></div>
    <div class="box red b-circul7"></div>
    <div class="box red b-circul8"></div>
    <div class="box red b-circul9"></div>
   <div class="box red b-circul10"></div>
   <div class="box red b-circul11"></div>
</div>

CSS

.wrapper{
  position:absolute;
  top:200px;
  
}
.box{
    position:absolute;
    width:50px;
    height:50px;
    border-radius:50%;
    left:200px
}

.b-circul0{
    background-color:red;
}
.b-circul1{
    background-color:green;
}
.b-circul2{
    background-color:blue;
}
.b-circul3{
    background-color:yellow;
}
.b-circul4{
    background-color:black;
}
.b-circul5{
    background-color:#111111;
}
.b-circul6{
    background-color:#222222;
}
.b-circul7{
    background-color:#333333;
}
.b-circul8{
    background-color:#444444;
}
.b-circul9{
    background-color:#555555;
}
.b-circul10{
    background-color:#666666;
}
.b-circul11{
    background-color:#777777;
}

JavaScript

var step = 0;


function animation(tmp_object_name,tmp_object_number,tmp_x,tmp_y){
    step += 0.02;
    for ( var i = 0; i < tmp_object_number; i++) {
        angle = ((Math.PI * 2) / tmp_object_number) * i+step;
        x = Math.round(Math.sin(angle) * tmp_x);
        y = Math.round(Math.cos(angle) * tmp_y);
        $(tmp_object_name+tmp_object_number).css('-webkit-transform', 'translate('+x+'px,'+y+'px) scale('+(((y+tmp_y)/(tmp_y*4))+0.5)+')').css('z-index',(y+tmp_y+1));
    }
}
setInterval(function(){ animation('.b-circul',12,100,10); }, 30);