JSFiddle - React, Tailwind, and code Playground

by julian_weinert

HTML

<script src="https://github.com/mikaelhm/odometer/raw/master/odometer.min.js"></script>
<div id="membercounterwrapper"> <span>MEMBERS #</span>
	<span class="odometer">0</span>

</div>

CSS

@font-face {
    font-family:'Jura';
    font-style: normal;
    font-weight: 400;
    src: local('Jura Regular'), local('Jura-Regular'), url(https://fonts.gstatic.com/s/jura/v7/x6RZE5IaGzhqlvflqX29zvesZW2xOQ-xsNqO47m55DA.ttf) format('truetype');
}
#membercounterwrapper {
    width:100%;
    font-size:34px;
    font-family:jura;
    text-align:center;
    margin-top:50px;
}
#membercounterwrapper span {
    font-size:34px;
    font-family:jura;
    vertical-align:middle;
}





.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  position: relative;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  position: relative;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-default .odometer-digit .odometer-digit-inner {
  text-align: left;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon {
  display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner {
  display: block;
  -webkit-backface-visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-default .odometer-digit .odometer-value {
  display: block;
  -webkit-transform:...

JavaScript

counter = new Odometer({
    el: document.querySelector("#membercounterwrapper .odometer"),
    minIntegerLen: 6,
    format: "(,ddd)",
    theme: "default",
    value: 100
});
console.log(counter);
setTimeout(function() {
    counter.update(87);
}, 500);