JSFiddle - React, Tailwind, and code Playground

by indratiola

HTML

<!DOCTYPE html>

    <div id="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

CSS

body{
                background-color : #333;
                min-height: 100%:
            }
            #loading {
                position: absolute;
                top: 45%;
                left: 45%;
            }
            #loading span{
                position: absolute;
                display: block;
                height: 20px;
                width: 20px;
                background: #1eff00;
            }
            #loading span:nth-child(1){
                background: #54acd2;
                transform: none;
                animation: loading_1 3s infinite ease-in-out;
            }
            #loading span:nth-child(2) {
                background: #e14a39;
                transform: translateX(40px);
                animation: loading_2 3s infinite ease-in-out
            }
            #loading span:nth-child(3) {
                background: #F18d05;
                transform: translateX(40px) translateY(40px);
                animation: loading_3 3s infinite ease-in-out
            }
            #loading span:nth-child(4) {
                background: #e14a39;
                transform: translateY(40px);
                animation: loading_4 3s infinite ease-in-out
            }

            @keyframes loading_1{
                25% {
                    transform: translateX(40px);
                }
                50% {
                    transform: translateX(40px) translateY(40px);
                }
                75% {
                    transform: translateY(40px);
                }
                100% {
                    transform: none;
                }
            }
            @keyframes loading_2{
                25% {
                    transform: translateX(40px) translateY(40px);
                }
                50% {
                    transform: translateY(40px);
                }
                75% {
                    transform: none;
                }
                100% {
                    transform:...