JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>loader</title>
</head>

<body>
</body>
    <div id="outer-ring">
    <div id="inner-ring">
    </div>
    </div>
</html>

CSS

#outer-ring {
            height: 200px;
            width: 200px;
            border: 10px solid blue;
            border-radius: 100%;
            -webkit-transform:rotate(45deg);

            -webkit-animation-duration: 10s;
            -webkit-animation-name: outer;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: step-start;
            -webkit-animation-direction:alternate;
        }
        #inner-ring {
            margin: -10px 0 0 -10px;
            height: 200px;
            width: 200px;
            border: 10px solid transparent;
            border-radius: 100%;

            -webkit-animation-duration: 10s;
            -webkit-animation-name: inner;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function:linear;
            -webkit-animation-direction:alternate;
        }

        @-webkit-keyframes inner {
            from {
                -webkit-transform:rotate(0deg);
                border-top-color: blue;
            }
            25% {
                border-top-color: blue;
                -webkit-transform:rotate(90deg);
            }
            50% {
                border-top-color: blue;
                -webkit-transform:rotate(180deg);
                -webkit-animation-timing-function: step-start;
            }
            50.001% {
                border-top-color: red;
                -webkit-transition-timing-function: linear;
                -webkit-transform:rotate(90deg);
            }
            75% {
                border-top-color: red;
                -webkit-transform:rotate(180deg);
            }
            to {
                border-top-color: red;
                -webkit-transform:rotate(270deg);
            }
        }

        @-webkit-keyframes outer {
            from {
                border-top-color: blue;
                border-left-color: blue;
                border-bottom-color: blue;
               ...