JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<div id="wrap">
    <div id="odometer" class="odometer">123</div>
</div>

CSS

</style><!-- This closes the open style tag above. Just a jsFiddle thing. Please ignore. -->


<!-- Odometr includes -->
<link rel="stylesheet" href="http://github.hubspot.com/odometer/themes/odometer-theme-car.css" />
<script src="http://github.hubspot.com/odometer/odometer.js"></script>

<!-- Extra styles for this example -->
<style>
.odometer {
    font-size: 100px;
}

#wrap {
    position: absolute;
    left: 0;
    top: 0;
}

#wrap.offscreen {
    left: -99999px;
}

JavaScript

setTimeout(function(){
    wrap.className = 'offscreen'
    odometer.innerHTML = 456;
    
    setTimeout(function(){
        wrap.className = ''
        
        setTimeout(function(){
            odometer.innerHTML = 789;
        }, 1000);
    }, 4000);
}, 4000);