JSFiddle - React, Tailwind, and code Playground

HTML

<section id="global">
  
                <div class="anim">
              
                  <div id="top" class="mask">
                    <div class="plane"></div>
                  </div>
                  
                   <div id="middle-top" class="mask">
                    <div class="plane"></div>
                  </div>
                  
                  <div id="middle" class="mask">
                    <div class="plane"></div>
                  </div>
              
                  <div id="bottom" class="mask">
                    <div class="plane"></div>
                  </div>
                  
                   
                </div>
                  
                <p id="loading-texte"><i>LOADING...</i></p>
                  
              </section>

CSS

.anim {
    transform: rotate(90deg);
}

#global {
    width: 70px;
    margin: auto;
    zoom: 1.9;
    margin-top: 100px;
    position: relative;
    cursor: pointer;
    height: 60px;
}

.mask {
    position: absolute;
    border-radius: 2px;
    overflow: hidden;
    perspective: 1000;
    backface-visibility: hidden;
}

.plane {
    background: #2a6fed;
    width: 400%;
    height: 100%;
    position: absolute;
    transform: translate3d(0px, 0, 0);
    /*transition: all 0.8s ease; */
    z-index: 100;
    perspective: 1000;
    backface-visibility: hidden;
}

.animation {
    transition: all 0.3s ease;
}

#top .plane {
    z-index: 2000;
    animation: trans3 3s ease-out infinite 0s backwards;
}

#middle .plane {
    transform: translate3d(0px, 0, 0);
    background: #2358be;
    animation: trans2 3s ease-out infinite 1.5s backwards;
}

#middle-top .plane {
    transform: translate3d(0px, 0, 0);
    background: #2358be;
    animation: trans25 3s ease-out infinite 2s backwards;
}

#bottom .plane {
    z-index: 2000;
    animation: trans1 3s ease-out infinite 2.6s backwards;
}

#top {
    width: 53px;
    height: 20px;
    left: 40px;
    transform: skew(15deg, 0);
    z-index: 100;
    top: -26px;
}

#middle-top {
    width: 33px;
    height: 20px;
    left: 60px;
    top: -10px;

    transform: skew(15deg, -45deg);
}

#middle {
    width: 33px;
    height: 20px;
    left: 60px;
    top: 15px;

    transform: skew(-15deg, 40deg);
}

#bottom {
    width: 53px;
    height: 20px;
    left: 40px;
    top: 30px;
    transform: skew(-15deg, 0);
}

#loading-texte {
    color: white;
    position: absolute;
    top: 70px;
    font-family: Arial;
    text-align: center;
    font-size: 12px;
}

@keyframes trans1 {
    from {
        transform: translate3d(-250px, 0, 0);
    }
    to {
        transform: translate3d(53px, 0, 0);
    }
}

@keyframes trans2 {
    from {
        transform: translate3d(33px, 0, 0);
    }
    to {
        transform: translate3d(-250px, 0,...