JSFiddle - React, Tailwind, and code Playground

by Sedbol

HTML

<input type="button" value="send" class="run">
<div class="rul"><div class="kont"></div></div>

CSS

.elm{
 width: 100px;
height: 100px;
background: #1E90FF;
margin-top: 10px;

}
.kont{
 position: relative;
transition: 5s;
top: 0px;

}
.rul{
width: 100px;
height: 120px;
overflow: hidden;
}

JavaScript

var button =document.getElementsByClassName("run")[0];
button.onclick=function run(){
        for (let i=0;send>i;i++){
            let stepY=110*stop;
            document.getElementsByClassName("kont")[0].style.transform="translate3d(0px, -"+stepY+"px, 0px)";
        }
    }

 
 var use =document.getElementsByClassName('kont')[0];
    let send=3;
    let stop=2;
    for(let i =0;send>i;i++){
        let ins =document.createElement('div');
        ins.className="elm";
        ins.innerHTML=i;
        use.appendChild(ins)
    }