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...

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($) {
    
    $.fn.isInViewport = function(options) {
    
        options = $.extend({
            defClass: 'animated'
        }, options);
        
        
        var 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;
        }
        
        var changeClass = function(elem) {
            var $this;
            elem.each(function() {
                $this = $(this);
                if (checkInViewport($this)) {
                    $(this).addClass(options.defClass);
                } else {
                    $(this).removeClass(options.defClass);
                }
            });
        }
        
        var 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);
                }
            };
        }
        
        /* start run */
        var $elem = $(this);
        var delayScroll = debounce(function() {
            changeClass($elem);
        }, 250);
        
        delayScroll();
        
        $(window).on('resize scroll', function() {
            delayScroll();
        });
        
        return this;
   ...