JSFiddle - React, Tailwind, and code Playground

by Sedbol

HTML

<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: -110px;

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

JavaScript

setTimeout(function run(){
        
            document.getElementsByClassName("kont")[0].style.transform="translate3d(0px, 100px, 0px)";
       
    },1000)

 
 var use =document.getElementsByClassName('kont')[0];
    let ins =document.createElement('div');
        ins.className="elm";
        ins.innerHTML="<img src='https://images.unsplash.com/photo-1488628075628-e876f502d67a?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=' >";
        use.appendChild(ins)