JSFiddle - React, Tailwind, and code Playground

HTML

<div id="red" class="quarters"></div>
<div id="blue" class="quarters"></div>
<div id="green" class="quarters"></div>
<div id="yellow" class="quarters"></div>

CSS

.quarters {
    width: 101px;
    height: 101px;
    border-radius: 10%;
    position: relative;
}

.quarters:after {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),                   
                linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
    background-size: 25% 100%, 100% 25%;
    background-position: 100% 0%, 0% 100%;
    background-repeat: no-repeat;
  
}

#red {
    background-color: red;
}
#blue {
    background-color: blue;
}
#green {
    background-color: green;
}
#yellow {
    background-color: yellow;
}