JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://www.jqueryscript.net/demo/animating-roll-number/js/jquery.rollNumber.js"></script>
<div class="number-diy">
    <div class="data" data-number="21468159"></div>
</div>

CSS

body {
  background: #0A2348;
}
.number-normal {
color: #ECF0F1;
}
.number-diy {
  margin-top: 120px;
}
.number-diy .data ._number {
  background: url(../img/n-bg.png) center no-repeat;
  background-size: 100% 100%;
}
.number-diy .data ._number span {
  background: linear-gradient(to bottom, #FEF1CD, #F9D16B);
  -webkit-background-clip: text;
  color: transparent !important;
}

JavaScript

$diy = $('.number-diy .data');
$diy.rollNumber({
  number: $diy[0].dataset.number, 
  speed: 500, 
  interval: 200,
  rooms: 9,
  space: 110,
  symbol: ',', 
  fontStyle: {
    'font-size': 102,
    'font-family': 'LetsgoDigital',
  }
})