JSFiddle - React, Tailwind, and code Playground

by Bharat Singh Negi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="row">
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <div class="col-md-12 m-b-xm">
    <div class="col-xs-4 office">
      <div>
        <i><img src="images/office-ico.jpg" alt=""></i>
        <span class="count">10</span>
      </div>
      <p>Offices Worldwide</p>
    </div>
    <div class="col-xs-4 office">
      <div>
        <i><img src="images/hard-ico.jpg" alt=""></i>
        <span class="count" data-speed="1000">180</span>
      </div>
      <p>Hardworking People</p>
    </div>
    <div class="col-xs-4 office">
      <div>
        <i><img src="images/coun-ico.jpg" alt=""></i>
        <span class="count">06</span>
      </div>
      <p>Countries Covered</p>
    </div>
    <div class="clearfix"></div>
  </div>
</div>

CSS

.office{padding-right: 5px; padding-left: 5px;}
.office div{margin-bottom:5px;}
.office i {margin-right:0px;}
.office i img{width: 35px; height: 35px;}
.office div span{ font-size: 36px; position: relative; top: 10px;}
.office p{ font-size: 13px; margin:0; padding:0;}

JavaScript

$(document).ready(function () {
    $('.count').each(function () {
	    $(this).prop('Counter',0).animate({
	        Counter: $(this).text()
	    }, {
	        duration: 4000,
	        easing: 'swing',
	        step: function (now) {
	            $(this).text(Math.ceil(now));
	        }
	    });
	});
});