JSFiddle - React, Tailwind, and code Playground

by jaycethanks

HTML

<section>
        <div class="container">
            <div class="loading">
                <div class="loading-box">
                    <div class="object" id="one"></div>
                    <div class="object" id="two"></div>
                    <div class="object" id="three"></div>
                    <div class="object" id="four"></div>
                    <div class="object" id="five"></div>
                    <div class="object" id="six"></div>
                    <div class="object" id="seven"></div>
                    <div class="object" id="eight"></div>
                    <div class="object" id="big-center"></div>
                </div>
            </div>

            <div class="description">
                <div class="loading-text">
                    <span class='letter'>P</span> <span class='letter'>R</span> <span class='letter'>E</span> <span class='letter'>P</span> <span class='letter'>A</span> <span class='letter'>R</span> <span class='letter'>I</span>
                    <span class='letter'>N</span> <span class='letter'>G</span>
                </div>
            </div>
        </div>
    </section>

CSS

body {
         margin: 0;
         padding: 0;
         background-color: #232323;
       }

       .container {
         /* display: flex; */
         /* justify-content: center; */
       }

       .loading {
         width: 100%;
         position: relative;
         margin-top: 20%;
       }

       .loading-box {
         width: 200px;
         /* border: 1px solid #f40; */
         transform: rotate(45deg);
         position: relative;
         left: calc(50% - 100px);
         /* left: 50%; */
         height: 200px;
       }

       .object {
         width: 20px;
         height: 20px;
         background-color: aquamarine;
         position: absolute;
         box-shadow: 0px 0px 20px 1px cyan
       }

       #one {
         animation: object_one 2s infinite;
         animation-delay: .1s;
       }

       #two {
         animation: object_two 2s infinite;
         animation-delay: .2s;
       }

       #three {
         animation: object_three 2s infinite;
         animation-delay: .3s;
       }

       #four {
         animation: object_four 2s infinite;
         animation-delay: .4s;
       }

       #five {
         animation: object_five 2s infinite;
         animation-delay: .5s;
       }

       #six {
         animation: object_six 2s infinite;
         animation-delay: .6s;
       }

       #seven {
         animation: object_seven 2s infinite;
         animation-delay: .7s;
       }

       #eight {
         animation: object_eight 2s infinite;
         animation-delay: .8s;
       }

       #big-center {
         animation: object_big-center 2s infinite;
         animation-delay: .5s;
       }

       @keyframes object_big-center {
         50% {
           transform: scale(2.5);
         }
       }

       @keyframes object_eight {
         50% {
           transform: translate(65px, 0);
         }
       }

       @keyframes object_seven {
         50% {
           transform: translate(65px, 65px);
         }
       }

       @keyframes...