JSFiddle - React, Tailwind, and code Playground

HTML

<div class="valores_wrap">
    <div id="valores">
    </div>
</div>

CSS

.valores_wrap {
     overflow:hidden;
     height:60px;
     width:100px;
     border:1px solid #000;
    position:relative;
    display:inline_block;
}
#valores {
  left:0;
  top:0;
  position:absolute;
  font-size:60px;
  text-align:center;
  margin: 0 auto;
  z-index:0;
  width:100%;
}

JavaScript

$(document).ready(function(){
	var array = [1,2,3,4,5,6,7,8,9,107,8,9,107,8,9,107,8,9,107,8,9,107,8,9,107,8,9,107,8,9,107,8,9,107,8,9,107,8,9,107,8,9,10,11,12,13,9,10,11,12,13,14,15,14,15];
    var contador = 1;
	var novoTopo = array.length * 200 * -1;
	$('#valores').css({top: + novoTopo});
    for(var i =0;i<array.length;i++){
    	$("#valores").append("<div id='result"+contador+"' classs='name'>"+array[i]+"</div>");
        contador++;
    }
    for(var i =0;i<array.length;i++){
    	$("#valores").append("<div id='result"+contador+"' classs='name'>"+array[i]+"</div>");
        contador++;
    }
    for(var i =0;i<array.length;i++){
    	$("#valores").append("<div id='result"+contador+"' classs='name'>"+array[i]+"</div>");
        contador++;
    }    

    $('#valores').animate({top: '0'},5000);

});