JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<div class="b1">
            <div>
                <div>
                    <div>
                        <div>
                            <div class="b2">
                                <div>
                                    <div>
                                        <div>
                                            <div>
                                                <div>
                                                    <div>
                                                        <div>
        
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

CSS

body{
    font-family: Arial, Tahoma;
    font-size: 14px;
    color: #fff;
    background: #6d0019;
    overflow: hidden;
}

.b1{
    width: 600px;
    height: 600px;
    padding: 20px;
    margin: 0 auto;
    background: #a90329;
    background: -moz-radial-gradient(center, ellipse cover,  #a90329 0%, #6d0019 46%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#a90329), color-stop(46%,#6d0019));
    background: -webkit-radial-gradient(center, ellipse cover,  #a90329 0%,#6d0019 46%);
    background: -o-radial-gradient(center, ellipse cover,  #a90329 0%,#6d0019 46%);
    background: -ms-radial-gradient(center, ellipse cover,  #a90329 0%,#6d0019 46%);
    background: radial-gradient(ellipse at center,  #a90329 0%,#6d0019 46%);
}



.b1 div{
    padding: 20px 10px;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 100%;
    box-shadow: 0 0 15px 0 #000;
    -webkit-animation: oops 5s infinite linear;
    animation: oops 5s infinite linear;
}

.b1>div{
    box-shadow: inset 0 0 3px #000;
}

.b2 div{
    box-shadow: 0 0 15px 0 #000;
    -webkit-animation: opa 5s infinite linear;
    animation: opa 5s infinite linear;
}


@-webkit-keyframes 'oops' {
    from{
        -webkit-transform: none;
    }

    25%{
        -webkit-transform: rotate(10deg);
    }

    50%{
        -webkit-transform: rotate(0deg);
    }

    75%{
        -webkit-transform: rotate(-10deg);
    }

    to{
        -webkit-transform: rotate(0deg);
    }
}


@-webkit-keyframes opa {
    from{
        -webkit-transform: none;
    }

    25%{
        -webkit-transform: rotate(-10deg);
    }

    50%{
        -webkit-transform: rotate(0deg);
    }

    75%{
        -webkit-transform: rotate(10deg);
    }

    to{
        -webkit-transform: rotate(0deg);
    }
}

@keyframes oops {
    from{
        -webkit-transform: none;
    }

    25%{
        -webkit-transform: rotate(10deg);
        -moz-transform:...