JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="circles-block">
  <div class="circle-item circle-item-1">
    <div class="circle-inner">
      01
    </div>
  </div>
  <div class="circle-item circle-item-2">
    <div class="circle-inner">
      02
    </div>
  </div>
  <div class="circle-item circle-item-3">
    <div class="circle-inner">
      03
    </div>
  </div>
  <div class="circle-item circle-item-4">
    <div class="circle-inner">
      04
    </div>
  </div>
  <div class="circle-item circle-item-5">
    <div class="circle-inner">
      05
    </div>
  </div>
  <div class="circle-item circle-item-6">
    <div class="circle-inner">
      06
    </div>
  </div>
  <div class="circle-item circle-item-7">
    <div class="circle-inner">
      07
    </div>
  </div>
  <div class="circle-item circle-item-8">
    <div class="circle-inner">
      08
    </div>
  </div>
  <div class="circle-item circle-item-9">
    <div class="circle-inner">
      09
    </div>
  </div>
  <div class="circle-item circle-item-10">
    <div class="circle-inner">
      10
    </div>
  </div>
  <div class="circle-item circle-item-11">
    <div class="circle-inner">
      11
    </div>
  </div>
  <div class="circle-item circle-item-12">
    <div class="circle-inner">
      12
    </div>
  </div>
  <div class="circle-item circle-item-13">
    <div class="circle-inner">
      13
    </div>
  </div>
  <div class="circle-item circle-item-14">
    <div class="circle-inner">
      14
    </div>
  </div>
  <div class="circle-item circle-item-15">
    <div class="circle-inner">
      15
    </div>
  </div>
  <div class="circle-item circle-item-16">
    <div class="circle-inner">
      16
    </div>
  </div>
  <div class="circle-item circle-item-17">
    <div class="circle-inner">
      17
    </div>
  </div>
  <div class="circle-item circle-item-18">
    <div class="circle-inner">
      18
    </div>
  </div>
  <div class="circle-item...

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.circles-block {
  padding: 50px 0;
}

.circle-item {
  width: 31.333333%;
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: 1%;
  margin-right: 1%;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  float: left;
  position: relative;
  font-size: 25px;
  transition: transform 600ms cubic-bezier(0.8, 0, 0, 0.8);
  transform: scale(0.3);
}

.circle-item::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}

.circle-item-1 {
  background-color: #ed194b;
}

.circle-item-2 {
  background-color: #f37c78;
  transition-delay: 0.1s;
}

.circle-item-3 {
  background-color: #f8a19a;
  transition-delay: 0.1s;
}

.circle-item-4 {
  background-color: #f7921e;
}

.circle-item-5 {
  background-color: #faac57;
  transition-delay: 0.1s;
}

.circle-item-6 {
  background-color: #fdc78b;
  transition-delay: 0.2s;
}

.circle-item-7 {
  background-color: #ffd401;
}

.circle-item-8 {
  background-color: #ffe500;
  transition-delay: 0.1s;
}

.circle-item-9 {
  background-color: #fef46e;
  transition-delay: 0.2s;
}

.circle-item-10 {
  background-color: #a6ce3a;
}

.circle-item-11 {
  background-color: #bed82f;
  transition-delay: 0.1s;
}

.circle-item-12 {
  background-color: #d6e167;
  transition-delay: 0.2s;
}

.circle-item-13 {
  background-color: #00bbbd;
}

.circle-item-14 {
  background-color: #72cbcf;
  transition-delay: 0.1s;
}

.circle-item-15 {
  background-color: #9bd8d9;
  transition-delay: 0.2s;
}

.circle-item-16 {
  background-color: #016bb5;
}

.circle-item-17 {
  background-color: #628ac8;
  transition-delay: 0.1s;
}

.circle-item-18 {
  background-color: #8aa4d5;
  transition-delay: 0.2s;
}

.circle-item-19 {
  background-color: #af72ae;
}

.circle-item-20 {
  background-color: #c196c4;
  transition-delay: 0.1s;
}

.circle-item-21 {
  background-color: #d0b1d3;
  transition-delay: 0.2s;
}

.circle-item-22 {
  background-color: #ba3599;
}

.circle-item-23...

JavaScript

(function($) {
  $.extend($.fn, {
    isInViewport: function() {
      return new isInViewport(this);
    }
  });

  var isInViewport = function($el) {
    this.init($el);
  };

  $.extend(isInViewport, {
    defaults: {
      isSkipStep: false,
      callback: function() {},
    },
    prototype: {
      init: function($elem) {
        var delayScroll = this.debounce(function() {
          this.changeClass($elem);
        }.bind(this), 250);

        delayScroll();

        $(window).on('resize scroll', function() {
          delayScroll();
        });

      },

      changeClass: function(elem) {
        elem.each(function(index, el) {
          const options = {
            defClass: 'animated'
          };
          if (this.checkInViewport(el)) {
            $(el).addClass(options.defClass);
          } else {
            $(el).removeClass(options.defClass);
          }
        }.bind(this));
      },

      checkInViewport: function(elem) {
        var $elem = $(elem);
        var $window = $(window);
        var elementTop = $elem.offset().top;
        var elementBottom = elementTop + $elem.outerHeight();

        var viewportTop = $window.scrollTop();
        var viewportBottom = viewportTop + $window.height();

        return elementBottom > viewportTop && elementTop < viewportBottom;
      },

      debounce: function(func, wait, immediate) {
        var timeout;
        return function() {
          var context = this;
          var args = arguments;
          var later = function() {
            timeout = null;
            if (!immediate) {
              func.apply(context, args);
            }
          };
          var callNow = immediate && !timeout;
          clearTimeout(timeout);
          timeout = setTimeout(later, wait);
          if (callNow) {
            func.apply(context, args);
          }
        };
      }




    }
  });
}(jQuery));

/******************************/
/*         EXAMPLE            */
var $test =...