JSFiddle - React, Tailwind, and code Playground

by mowglisanu

HTML

<div class="outer-circle"><div class="inner-circle"></div></div>
<div class="outer-circle"><div class="inner-circle"></div></div>
<div class="outer-circle"><div class="inner-circle"></div></div>

CSS

.outer-circle{
    top:0;
    left:0;
    position:absolute;
    width:250px;
    height:250px;
    border:25px solid transparent;
    border-radius:50%;
}
.inner-circle{
    position:absolute;
    top:25px;
    left:25px;
    width:0;
    height:0;
    border:100px solid transparent;
    border-radius:50%;
}
.outer-circle:nth-child(1){
    border-top-color:rgb(52,171,203);
    border-right-color:rgb(52,171,203);
}
.outer-circle:nth-child(1) .inner-circle{
    border-top-color:rgb(52,171,203);
    border-right-color:rgb(52,171,203);
}
.outer-circle:nth-child(2){
    border-left-color:rgb(19,138,180);
    border-bottom-color:rgb(19,138,180);
}
.outer-circle:nth-child(2) .inner-circle{
    border-left-color:rgb(19,138,180);
    border-bottom-color:rgb(19,138,180);
}