JSFiddle - React, Tailwind, and code Playground

by Alexandr Kudryavtsev

HTML

<div class="circles"></div>

CSS

.circles{
    position: absolute;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    box-shadow: inset 0 0 0 8px black,
    -110px 0 0 -8px white, 
    -110px 0 0 0px #0080cb, 
    110px 0 0 -8px white, 
    110px 0 0 0px #f0344d;
}

.circles:after{
    width: 100%;
    height: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    left: -55px;
    top: 50px;
    box-shadow: inset 0 0 0 8px #fcb132;
    content: '';
    position: absolute;
}

.circles:before{
    width: 100%;
    height: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    left: 55px;
    top: 50px;
    box-shadow: inset 0 0 0 8px #00a950;
    content: '';
    position: absolute;
}