JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left">
    <div class="parent" id="parent">
        <div class="round child" id="child"></div>
        <div class="round child1" id="child1"></div>
        <div class="round child2" id="child2"></div>
        <div class="round child3" id="child3"></div>
        <div class="round child4" id="child4"></div>
        <div class="round child5" id="child5"></div>
        <div class="zoidberg zoid" id="zoid"></div>
    </div>
    <div class="parent" id="parentA">
        <div class="round child" id="childA"></div>
        <div class="round child1" id="child1A"></div>
        <div class="round child2" id="child2A"></div>
        <div class="round child3" id="child3A"></div>
        <div class="round child4" id="child4A"></div>
        <div class="round child5" id="child5A"></div>
        <div class="zoidberg zoid" id="zoidA"></div>
    </div>
    <div class="parent" id="parentB">
        <div class="round child" id="childB"></div>
        <div class="round child1" id="child1B"></div>
        <div class="round child2" id="child2B"></div>
        <div class="round child3" id="child3B"></div>
        <div class="round child4" id="child4B"></div>
        <div class="round child5" id="child5B"></div>
        <div class="zoidberg zoid" id="zoidB"></div>
    </div>
    <div id="first">Development</div>
</div>
<div class="left">
    <div class="parentA" id="parentC">
        <div class="round child" id="childC"></div>
        <div class="round child1" id="child1C"></div>
        <div class="round child2" id="child2C"></div>
        <div class="round child3" id="child3C"></div>
        <div class="round child4" id="child4C"></div>
        <div class="round child5" id="child5C"></div>
        <div class="zoidberg zoid" id="zoidC"></div>
    </div>
    <div class="parentA" id="parentD">
        <div class="round child" id="childD"></div>
        <div class="round child1" id="child1D"></div>
        <div class="round child2" id="child2D"></div>
        <div class="round...

CSS

.left {
    float: left;
    margin-right: 10px;
}
#first {
    background: #CCC;
    height: 50px;
    width: 100px;
}
#second {
    background: #CCC;
    height: 50px;
    width: 100px;
}

.parent {
    position: relative;
    height: 100px;
    width: 100px;
}
.parentA {
    position: relative;
    height: 100px;
    width: 100px;
}
.round {
    position: absolute;
    border-radius: 50px;
    text-align: center;
}
.zoidberg {
    position: absolute;
    height: 100px;
    width: 100px;
    background: #57A5E4;
    z-index: -1;
    border-radius: 50px;
}
.child {
    top: 5px;
    right: 5px;
    height: 90px;
    width: 90px;
    background: #CCC;
    opacity: .4;
}
.child1 {
    top: 11.9px;
    right: 11.9px;
    height: 76.2px;
    width: 76.2px;
    background: #CCC;
    opacity: .35;
}
.child2 {
    top: 18.8px;
    right: 18.8px;
    height: 62.4px;
    width: 62.4px;
    background: #CCC;
    opacity: .3;
}
.child3 {
    top: 25.7px;
    right: 25.7px;
    height: 48.6px;
    width: 48.6px;
    background: #CCC;
    opacity: .25;
}
.child4 {
    top: 32.6px;
    right: 32.6px;
    height: 34.8px;
    width: 34.8px;
    background: #CCC;
    opacity: .2;
}
.child5 {
    top: 39.5px;
    right: 39.5px;
    height: 21px;
    width: 21px;
    background: #000;
    opacity: 1;
}
.zoid {
    opacity: 0;
}

JavaScript

$('.child,.child1,.child2,.child3,.child4').hide();

fadeItIn();
setTimeout(function() {
    fadeItInA();
},500)
setTimeout(function() {
    fadeItInB();
},1000)
    
$('.parentA').animate({
    opacity: "0"
},0);



function fadeItIn() {
    
    window.setInterval(function(){

        // Fade Ins
        $('#child4,#child4C').fadeIn(175);
        setTimeout(function () {
            $('#child3,#child3C').fadeIn(175);
        }, 175);
        setTimeout(function () {
            $('#child2,#child2C').fadeIn(175);
        }, 350);
        setTimeout(function () {
            $('#child1,#child1C').fadeIn(175);
        }, 525);
        setTimeout(function () {
            $('#child,#childC').fadeIn(175);
        }, 700);

        // Fade Outs
        setTimeout(function () {
            $('#child,#childC').fadeOut(175);
        }, 875);
        setTimeout(function () {
            $('#child1,#child1C').fadeOut(175);
        }, 1050);
        setTimeout(function () {
            $('#child2,#child2C').fadeOut(175);
        }, 1225);
        setTimeout(function () {
            $('#child3,#child3C').fadeOut(175);
        }, 1400);
        setTimeout(function () {
            $('#child4,#child4C').fadeOut(175);
        }, 1575);  

    }, 3000);    

    
};
function fadeItInA() {

    window.setInterval(function(){

        // Fade Ins
        $('#child4A,#child4D').fadeIn(175);
        setTimeout(function () {
            $('#child3A,#child3D').fadeIn(175);
        }, 175);
        setTimeout(function () {
            $('#child2A,#child2D').fadeIn(175);
        }, 350);
        setTimeout(function () {
            $('#child1A,#child1D').fadeIn(175);
        }, 525);
        setTimeout(function () {
            $('#childA,#childD').fadeIn(175);
        }, 700);

        // Fade Outs
        setTimeout(function () {
            $('#childA,#childD').fadeOut(175);
        }, 875);
        setTimeout(function () {
            $('#child1A,#child1D').fadeOut(175);
       ...