JSFiddle - React, Tailwind, and code Playground

by shamaleyte

HTML

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

<div id="odometer2" class="odometer">123</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;
}

/* 1. Frame */
div#odometer {
  background: linear-gradient( 
    45deg , #fac530 0%, #f07335 100%) !important;
    
  background: #eb9233!important;
}

/* 2. Digits' Background */
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit {
  -moz-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: inset 0 0 0.3em rgb(0 0 0 / 80%);
  -o-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8);
  box-shadow: inset 0 0 0.3em rgb(0 0 0 / 80%);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(40%, #333333), color-stop(60%, #101010), color-stop(80%, #333333), color-stop(100%, #333333));

  /* For Eleni */
  background-image: -webkit-linear-gradient(top, #eb9233 0%, #333333 40%, #eb9233 60%, #333333 80%, #eb9233 100%);
  /* For Eleni */

  background-image: -moz-linear-gradient(top, #eb9233 0%, #333333 40%, #eb9233 60%, #333333 80%, #eb9233 100%);
  background-image: -o-linear-gradient(top, #eb9233 0%, #333333 40%, #eb9233 60%, #333333 80%, #eb9233 100%);
  background-image: -ms-linear-gradient(top, #eb9233 0%, #333333 40%, #eb9233 60%, #333333 80%, #eb9233 100%);
  background-image: linear-gradient(top, #eb9233 0%, #333333 40%, #eb9233 60%, #333333 80%, #eb9233 100%);
  padding: 0 0.15em;
}

/* 3. Last Digit's Background */
.odometer.odometer-auto-theme .odometer-digit:last-child,
.odometer.odometer-theme-car .odometer-digit:last-child {
  -moz-border-radius: 0 0.2em 0.2em 0;
  -webkit-border-radius: 0 0.2em 0.2em 0;
  -o-border-radius: 0 0.2em 0.2em 0;
  -ms-border-radius: 0 0.2em 0.2em 0;
 ...

JavaScript

setTimeout(function(){
    odometer.innerHTML = 1559;
}, 1000);