JSFiddle - React, Tailwind, and code Playground

by Anil kolase

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="sh-counter">
<div class="container">
<div class="row">
	<div class="col-sm-3">
    	<div id="shiva"><span class="count">200</span><span>+</span></div>
      <div class="counter-title">
        <span>CLIENT RETENTION</span>
      </div>
      <div class="counter-line">
        <span class="short-line"></span>
        <span class="long-line"></span>
      </div>
    </div>
    <div class="col-sm-3">
    	<div id="shiva"><span class="count">150</span><span>+</span></div>
      <div class="counter-title">
        <span>YEARS OF SERVICE</span>
      </div>
    </div>
    <div class="col-sm-3">
    	<div id="shiva"><span class="count">200</span><span>+</span></div>
      <div class="counter-title">
        <span>PROFESSIONALS</span>
      </div>
    </div>
    <div class="col-sm-3">
    	<div id="shiva"><span class="count">230</span><span>+</span></div>
      <div class="counter-title">
        <span>SATISFIED CLIENTS</span>
      </div>
    </div>
</div>
</div>
</div>

CSS

.sh-counter{
    	padding:50px 0 0;
        background-color: #3cb878;
        font-size: 70px;
        color: rgba(255, 255, 255, 0.2);
        line-height: 1;
    }
    .counter-title{
      font-size: 24px;
      color: #fff;
      position: relative;
      top: -22px;
    }
    .counter-line{
        position: relative;
        top: -60px;
    }
    .counter-line .short-line {
      display: inline-block;
      width: 20px;
      height: 3px;
      background-color: #66c491;
      border-radius: 10px;
      position: relative;
      margin-right: 10px;
    }
    .counter-line .long-line {
      display: inline-block;
      width: 50px;
      height: 3px;
      background-color: #66c491;
      border-radius: 10px;
      position: relative;
    }

JavaScript

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