JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="ring"></div>
 <div class="ring2"></div>
 <div class="ring3"></div>

CSS

@-webkit-keyframes rotate {
    from {
        -webkit-transform:rotate(0)
    }
    to {
        -webkit-transform:rotate(360deg)
    }
}
@-moz-keyframes rotate {
    from {
        -moz-transform:rotate(0)
    }
    to {
        -moz-transform:rotate(360deg)
    }
}
@-webkit-keyframes rotate2 {
    from {
        -webkit-transform:rotate(0)
    }
    to {
        -webkit-transform:rotate(720deg)
    }
}
@-moz-keyframes rotate2 {
    from {
        -moz-transform:rotate(0)
    }
    to {
        -moz-transform:rotate(720deg)
    }
}
@-webkit-keyframes rotate3 {
    from {
        -webkit-transform:rotate(1080deg)
    }
    to {
        -webkit-transform:rotate(0)
    }
}
@-moz-keyframes rotate3 {
    from {
        -moz-transform:rotate(1080deg)
    }
    to {
        -moz-transform: rotate(0)
    }
}


.ring{
width:121px;
height:121px;
border: 5px solid #c0fafd;
opacity: .9;
border-top: 5px solid transparent;
border-left: 5px solid transparent;
border-radius: 50px;
background:transparent;
margin:20px;
-webkit-border-radius: 112px;
-moz-border-radius: 112px;
border-radius: 112px;
-webkit-animation: rotate 1s linear infinite;
}
.ring2{
width:121px;
height:121px;
padding:20px;
border: 5px solid #a6edf7;
opacity: .9;
border-top: 5px solid transparent;
border-left: 5px solid transparent;
border-radius: 50px;
background:transparent;
-webkit-border-radius: 112px;
-moz-border-radius: 112px;
border-radius: 112px;
-webkit-animation: rotate2 1s linear infinite;
}
.ring3{
width:121px;
height:121px;
margin:20px;
border: 5px solid #9ae7f8;
opacity: .9;
border-top: 5px solid transparent;
border-left: 5px solid transparent;
border-radius: 50px;
background:transparent;
-webkit-border-radius: 112px;
-moz-border-radius: 112px;
border-radius: 112px;
-webkit-animation: rotate2 1s linear infinite;
}

.home-nav-item.marquee-nav-active .ring...