JSFiddle - React, Tailwind, and code Playground

by Ариан Шапиро

HTML

<img src="http://s012.radikal.ru/i320/1501/ba/9d9a26345093.jpg" ></img>
<div id="allthethings">
    <div id="circle" class="circle"></div>
    <div id="circle0" class="circle"></div>
    <div id="circle1" class="circle"></div>
    <div id="circle2" class="circle"></div>
    <div id="circle3" class="circle"></div>
    <div id="circle4" class="circle"></div>
</div>

CSS

.circle {
    border-radius:50%;
    border: 10px solid black;
    border-top-color:transparent;
    border-left-color:transparent;
    border-bottom-color:transparent;
    border-right-color:transparent;
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
    position: absolute;    

}
#circle4 {
    width:341px;
    height:341px;
    top:35px;
    left:35px;
    border-top-color:#3498db;
    border-left-color: rgba(52, 152, 219, 0.2);
    border-bottom-color: rgba(52, 152, 219, 0.1);
    animation: spin 12s linear infinite;
    -webkit-animation: spin 12s linear infinite;
}
#circle3 {
    width:315px;
    height:315px;
    top:48px;
    left:48px;
    border-top-color:#e74c3c;
    border-left-color: rgba(231, 76, 60, 0.2);
    border-bottom-color: rgba(231, 76, 60, 0.1);
    animation: spin 6s linear infinite;
    -webkit-animation: spin 6s linear infinite;
}
#circle2 {
    width:289px;
    height:289px;
    top:61px;
    left:61px;
    border-top-color:#f9c922;
    border-left-color: rgba(249, 201, 34, 0.2);
    border-bottom-color: rgba(249, 201, 34, 0.1);    
    animation: spin 3s linear infinite;
    -webkit-animation: spin 3s linear infinite;
}
#circle1 {
    width:263px;
    height:263px;
    top:74px;
    left:74px;
    border-top-color:#af25d8;
    border-left-color: rgba(175, 37, 216, 0.2);
    border-bottom-color: rgba(75, 37, 216, 0.1);  
    animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite;
}
#circle0 {
    width:237px;
    height:237px;
    top:87px;
    left:87px;
    border-top-color:#66d825;
    border-left-color: rgba(102, 216, 37, 0.2);
    border-bottom-color: rgba(102, 216, 37, 0.1);  
    animation: spin 1.5s linear infinite;
    -webkit-animation: spin 1.5s linear infinite;
}
#circle {
    width:211px;
    height:211px;
    top:100px;
    left:100px;
    border-top-color: #b7b7bc;
    border-left-color: rgba(183, 183, 188, 0.2);
    border-bottom-color: rgba(83, 183, 188, 0.1);  
   ...