JSFiddle - React, Tailwind, and code Playground

by Mladen Mihajlovic

HTML

<div class="wrap" id="wrap">

</div>

CSS

.wrap{
  border:1px solid #000;
  display: inline-block;
  height:30px;
  border-right: none;
}
.numbers{
   width:30px;
  height:30px;
  display:inline-block;
  overflow: hidden;
  border-right: 1px solid #000;
}
.numbers span{
  display: block;
  width:30px;
  height:30px;
  line-height: 30px;
  text-align: center;
}

.numbers[data-num="0"] div{
  transform: translate(0, 0);
  transition: all 1s ease;
}

.numbers[data-num="1"] div{
  transform: translate(0, -30px);
  transition: all 1s ease;
}

.numbers[data-num="2"] div{
  transform: translate(0, -60px);
  transition: all 1s ease;
}

.numbers[data-num="3"] div{
  transform: translate(0, -90px);
  transition: all 1s ease;
}

.numbers[data-num="4"] div{
  transform: translate(0, -120px);
  transition: all 1s ease;
}

.numbers[data-num="5"] div{
  transform: translate(0, -150px);
  transition: all 1s ease;
}

.numbers[data-num="6"] div{
  transform: translate(0, -180px);
  transition: all 1s ease;
}

.numbers[data-num="7"] div{
  transform: translate(0, -210px);
  transition: all 1s ease;
}

.numbers[data-num="8"] div{
  transform: translate(0, -240px);
  transition: all 1s ease;
}

.numbers[data-num="9"] div{
  transform: translate(0, -270px);
  transition: all 1s ease;
}

JavaScript

let arr = [];
var numbers = 1234561234;
const wrap = document.getElementById("wrap");

function toArray (val) {

  return (val).toString().split('');
}

arr = toArray(numbers);

for (let i = 0; i < arr.length; i++) {
    div = document.createElement('div'),
    div.className = "numbers";
    div.dataset.num = arr[i];
    div.dataset.x = i;
    div.innerHTML = "<div><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>"
    wrap.appendChild(div);
}


setInterval(function(){ 
arr.forEach( (k) => {
  arr[k] = Math.floor(Math.random() * 9) + 0;
})

for (let i = 0; i < arr.length; i++) {
    document.querySelector('.numbers[data-x="'+i+'"]').dataset.num = arr[i];
}
 }, 1000);