JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<div class="odometer one">0</div>
<div class="odometer two">0</div>
<div class="odometer three">0</div>
<div class="odometer four">0</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-minimal.css" />
<script src="http://github.hubspot.com/odometer/odometer.js"></script>

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

.odometer.one.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,
.odometer.one.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

.odometer.two.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,
.odometer.two.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  -ms-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
}

.odometer.three.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,
.odometer.three.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
  -webkit-transition-duration: 3s;
  -moz-transition-duration: 3s;
  -ms-transition-duration: 3s;
  -o-transition-duration: 3s;
  transition-duration: 3s;
}

.odometer.four.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,
.odometer.four.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
  -webkit-transition-duration: 4s;
  -moz-transition-duration: 4s;
  -ms-transition-duration: 4s;
  -o-transition-duration: 4s;
  transition-duration: 4s;
}

JavaScript

setTimeout(function(){
    $('.odometer.one').html(468);
  }, 1000);
setTimeout(function(){
    $('.odometer.two').html(94);
  }, 1000);
setTimeout(function(){
    $('.odometer.three').html(86);
  }, 1000);
setTimeout(function(){
    $('.odometer.four').html(27);
  }, 1000);