JSFiddle - React, Tailwind, and code Playground

HTML

<!-- The ticker will animate to whatever this series of numbers is. -->
<div class="questRealNumber">
    <span id="questNumCol1">3</span>
    <span id="questNumCol2">1</span>
    <span id="questNumCol3">9</span>
    <span id="questNumCol4">7</span>
</div>

<div class="questWindow">
    
    <div class="questNumCol questNumCol1">
        <div class="questNumber questNumber0">0</div>
        <div class="questNumber questNumber1">1</div>
        <div class="questNumber questNumber2">2</div>
        <div class="questNumber questNumber3">3</div>
        <div class="questNumber questNumber4">4</div>
        <div class="questNumber questNumber5">5</div>
        <div class="questNumber questNumber6">6</div>
        <div class="questNumber questNumber7">7</div>
        <div class="questNumber questNumber8">8</div>
        <div class="questNumber questNumber9">9</div>
    </div>
    
    <div class="questNumCol questNumCol2">
        <div class="questNumber questNumber0">0</div>
        <div class="questNumber questNumber1">1</div>
        <div class="questNumber questNumber2">2</div>
        <div class="questNumber questNumber3">3</div>
        <div class="questNumber questNumber4">4</div>
        <div class="questNumber questNumber5">5</div>
        <div class="questNumber questNumber6">6</div>
        <div class="questNumber questNumber7">7</div>
        <div class="questNumber questNumber8">8</div>
        <div class="questNumber questNumber9">9</div>
    </div>
    
    <div class="questNumCol questNumCol3">
        <div class="questNumber questNumber0">0</div>
        <div class="questNumber questNumber1">1</div>
        <div class="questNumber questNumber2">2</div>
        <div class="questNumber questNumber3">3</div>
        <div class="questNumber questNumber4">4</div>
        <div class="questNumber questNumber5">5</div>
        <div class="questNumber questNumber6">6</div>
        <div class="questNumber questNumber7">7</div>
        <div class="questNumber...

CSS

.questRealNumber {
    position: absolute;
    top: 40px;
    right: 40px;
    font-family: Arial;
    font-size: 20px;
}
.questRealNumber span {
    float: right;
}
.questWindow {
    position: relative;
    margin: 40px 0 0 40px;
    width: 160px;
    height: 40px;
    font-family: Arial;
    outline: 1px solid #cccccc;
    overflow: hidden;
    background: #eeeeee;
}
.questNumCol {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 400px;
    opacity: 0.5;
}
.questNumCol2 {
    right: 40px;
}
.questNumCol3 {
    right: 80px;
}
.questNumCol4 {
    right: 120px;
}
.questNumber {
    width: 40px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    background: yellow;
}

JavaScript

function questUpdateNumbers() {
    $('.questRealNumber span').each(function() {
        
        var questRowToAnimate = '.' + $(this).attr('id');
        
        var questRealNumber = $(this).text();
        
        switch (true) {
            case (questRealNumber == '0'):
                questRealNumber = '0px';
                break;
            case (questRealNumber == '1'):
                questRealNumber = '-40px';
                break;
            case (questRealNumber == '2'):
                questRealNumber = '-80px';
                break;
            case (questRealNumber == '3'):
                questRealNumber = '-120px';
                break;
            case (questRealNumber == '4'):
                questRealNumber = '-160px';
                break;
            case (questRealNumber == '5'):
                questRealNumber = '-200px';
                break;
            case (questRealNumber == '6'):
                questRealNumber = '-240px';
                break;
            case (questRealNumber == '7'):
                questRealNumber = '-280px';
                break;
            case (questRealNumber == '8'):
                questRealNumber = '-320px';
                break;
            case (questRealNumber == '9'):
                questRealNumber = '-360px';
                break;
            default:
                questRealNumber = '0px';
        }
        
        $(questRowToAnimate).delay(1000).animate({
            'top': questRealNumber
        }, 1000);
    
    });
}

questUpdateNumbers();

$('.questRealNumber').change(function() {
    questUpdateNumbers();
});