JSFiddle - React, Tailwind, and code Playground

by Jernej Slejko

HTML

<div class="wrapper">
    <div class="arc arc_start"></div>    
    <div class="arc arc_end"></div>
</div>

CSS

.wrapper {
    position:relative;
    margin:20px;
}
.arc {
    position:absolute;
    top:0;
    left:0;
    width:100px;
    height:500px;
    border-radius:100%;
    border:5px solid;
}
.arc_start {
    border-color:orange green green green;
    transform: rotate(45deg);
}
.arc_end {
    border-color:red red red purple;
    transform: rotate(210deg);
}