JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dupa1">
  <div class="dupa2" id="cipa" data-num="0">
    <span>0</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
  </div>
</div>

<button id="rand">rand</button>

CSS

#rand{margin-top:50px;}

.dupa1{
  height:30px;
  width:30px;
  border:1px solid #000;
  overflow:hidden;
}
.dupa2{
  transition:all 1s ease;
}
.dupa2 span{
  height:30px;
  width:30px;
  display:block;
  text-align:center;
  line-height:30px;
}

.dupa2[data-num="0"] {
  transfom:translate(0, 0);
}
.dupa2[data-num="1"] {
  transform:translate(0, -30px);
  }
.dupa2[data-num="2"] {
  transform:translate(0, -60px);
  }
.dupa2[data-num="3"] {
  transform:translate(0,-90px);
  }
.dupa2[data-num="4"] {
  transform:translate(0, -120px);
  }
.dupa2[data-num="5"] {
  transform: translate(0, -150px);
  }
.dupa2[data-num="6"] {
  transform:translate(0, -180px);
  }
.dupa2[data-num="7"] {
  transform:translate(0, -210px);
  }
.dupa2[data-num="8"] {
  transform:translate(0, -240px);
  }
.dupa2[data-num="9"] {
  transform:translate(0, -270px);
  }

JavaScript

document.getElementById("rand").addEventListener("click", randomize);


function randomize() {

let dupa = document.getElementById("cipa");
dupa.dataset.num = Math.floor(Math.random() * 9) + 0;

}