JSFiddle - React, Tailwind, and code Playground
HTML
<span class="digit"></span>
<span class="digit"></span>
<span class="digit"></span>
CSS
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.digit {
display: inline-block;
font: bold 32px monospace;
color: white;
background: black;
margin: 10px;
padding: 10px;
border-radius: 5px;
}
JavaScript
function output(value) {
const digits = document.querySelectorAll('.digit');
const { length } = digits;
Array
.from(`${value}`.padStart(length, 0).slice(-length))
.forEach((n, i) => digits[i].innerText = n);
}
let value = 0;
setInterval(() => output(value++), 100);