JSFiddle - React, Tailwind, and code Playground

by bgmort

HTML

styled:
<div id="counter"></div>

<input type="button" value="increment" onclick="increment()"/>

<hr>
default:
<div id="counter_default"></div>

CSS

#counter {
  height: 50px;
  width: 324px;
  border-radius: 4px;
  background: #372B1B;
  color: white;

/* could also go under #counter .jodometer_digit */    
  font-weight: bold;
  font-size: 36px;
  font-family: 'lucida grande', 'lucida sans unicode', arial, sans-serif;
  text-align: center;
}

JavaScript

/* based on jOdometer by Jesus Carrera 
   improved and implemented with text/CSS instead of images by Brian Mortenson */

(function($) {
    $.fn.jOdometer = function(settings) {

        if (this.length > 1) {
            this.each(function() {
                $(this).jOdometer(settings)
            });
            return this;
        }

        // override default configuration
        settings = $.extend({}, $.fn.jOdometer.defaults, settings);

        this.goToNumber = function(newCounter) {
            advanceCounter(newCounter);
        };

        // for each counter
        // return this.each(function(){
        var $this = $(this);

        var zeroSet = -settings.heightNumber; // position of the first 0
        var counter = parseFloat(settings.counterStart); // initialize counter with the start number
        // to store the digits of the number
        var integersArray = [];
        var decimalsArray = [];
        var digits = String(settings.counterStart).split('.'); // separate integers and decimals
        var numberOfDecimals = 0;
        var widthDot = 0;
        var counterText = '9 0 1 2 3 4 5 6 7 8 9 0 1';
        
        var right = settings.offsetRight;
        
        // if has decimals
        if (digits[1]) {
            // create a column for each decimal digit with the image in the position of the correspondent number
            var j = 0;
            for (var i = digits[1].length - 1; i > -1; i--) {
                decimalsArray[i] = digits[1].charAt(i);
                
                $this.append('<div style="right:' + right + 'px; top:' + ((parseInt(decimalsArray[i]) * settings.heightNumber * -1) + zeroSet) + 'px;" class="jodometer_digit jodometer_decimal_' + i + '" >' + counterText + '</div>');
                j++;
                
                right += settings.widthNumber + settings.spaceNumbers;
            }
            // add the dot (use background div so can be different width)
            $this.append('<div...