JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#contenedor, .cuadro {
    margin:0;
    padding:0;
}

#contenedor {
    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;
}

JavaScript

setInterval(function(){
var moverse =  $("#contenedor").height() * -1 //Cuanto se tiene que mover cada cuadro, o sea el alto del #contenedor multiplicado por -1 (para que se mueva para arriba)

    $("#contenedor .cuadro:first").animate( 
        {"margin-top":moverse},  //que el margin-top sea el valor dado
        300, // lo que dura la animacion en milisegundos = 0.3 segundos
        function(){ // La funcion que se ejecuta cuando termina de animarse
        $(this).css("margin-top",0).appendTo($(this).parent())})  // Que el margin-top vuelva a 0 al terminarse y que lo coloca al final del padre

},3000) //lo que dura en cambiar cada cuadro = 3 segundos