JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<div id="fx_container1">
<div id="contenedor">
<div class="cuadro" style="background-color:#F90"></div> 
<div class="cuadro" style="background-color:#CCC"></div> 
<div class="cuadro" style="background-color:#9C0"></div> 
<div class="cuadro" style="background-color:#FC0"></div> 
</div>
</div>

<div id="fx_container2">
<div id="contenedor2">
<div class="cuadro" style="background-color:#F90"></div> 
<div class="cuadro" style="background-color:#CCC"></div> 
<div class="cuadro" style="background-color:#9C0"></div> 
<div class="cuadro" style="background-color:#FC0"></div> 
</div>
</div>
</div>

CSS

div {
    margin:0;
    padding:0;
}

#contenedor, #contenedor2 {
    width:300px;
    height:300px;
    overflow:hidden;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
}

.cuadro {
    width:100%;
    padding-top:40%;
    height:60%;
    font-family:Arial, Helvetica, sans-serif;
    overflow:hidden;
    text-align:center;

}

#fx_container1, #fx_container2{
    -webkit-border-radius: 90px;
    -moz-border-radius: 90px;
    border-radius: 90px;
    height:250px;
    width:300px;
    overflow:hidden;
    float:left;
}

#wrapper {
    width:700px;
    
    
}

#fx_container2{
    margin-left:-30px;
}

JavaScript

setInterval(function(){
var moverse =  $("#contenedor").height() * -1;
$("#contenedor .cuadro:first, #contenedor2 .cuadro:first").animate(    {"margin-top":moverse},      300,    function(){$(this).css("margin-top",0).appendTo($(this).parent())}) }
,3000)