JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="counter_holder center" style="color:#ffffff; font-size:168px;">

  <span class="counter type1" data-delay="" style="background-color: black; height:168px; line-height:168px;">1678</span>

</div>

CSS

.counter_holder {
  display: block;
  opacity: 0;
  filter: alpha(opacity: 0);
  -webkit-transition: opacity 0.3s ease 0s;
  -moz-transition: opacity 0.3s ease 0s;
  -o-transition: opacity 0.3s ease 0s;
  width: 100%;
  font-size: 150px;
  line-height: 150px;
}

.counter_holder.left {
  text-align: left;
}

.counter_holder.right {
  text-align: right;
}

.counter_holder.center {
  text-align: center;
}

.counter_holder span.counter {
  font-family: "Oswald", sans-serif;
  overflow: hidden;
  display: inline-block !important;
  text-align: center;
  height: 150px;
  font-size: inherit;
  line-height: inherit;
}

.counter_holder h4 {
  margin: 30px 0px 0px;
}

.counter_holder p {
  margin: 18px 0px 0px;
}

.tocounter {
  float: none;
  margin: 0px;
}

JavaScript

/*
 * jQuery.appear
 * https://github.com/bas2k/jquery.appear/
 * http://code.google.com/p/jquery-appear/
 *
 * Copyright (c) 2009 Michael Hixson
 * Copyright (c) 2012 Alexander Brovikov
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
 */
(function($) {
    $.fn.appear = function(fn, options) {

        var settings = $.extend({

            //arbitrary data to pass to fn
            data: undefined,

            //call fn only on the first appear?
            one: true,

            // X & Y accuracy
            accX: 0,
            accY: 0

        }, options);

        return this.each(function() {

            var t = $(this);

            //whether the element is currently visible
            t.appeared = false;

            if (!fn) {

                //trigger the custom event
                t.trigger('appear', settings.data);
                return;
            }

            var w = $(window);

            //fires the appear event when appropriate
            var check = function() {

                //is the element hidden?
                if (!t.is(':visible')) {

                    //it became hidden
                    t.appeared = false;
                    return;
                }

                //is the element inside the visible window?
                var a = w.scrollLeft();
                var b = w.scrollTop();
                var o = t.offset();
                var x = o.left;
                var y = o.top;

                var ax = settings.accX;
                var ay = settings.accY;
                var th = t.height();
                var wh = w.height();
                var tw = t.width();
                var ww = w.width();

                if (y + th + ay >= b &&
                    y <= b + wh + ay &&
                    x + tw + ax >= a &&
                    x <= a + ww + ax) {

                    //trigger the custom event
                    if (!t.appeared) t.trigger('appear',...