JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
        <div class="block"></div>
        <span class="lt"></span>
        <span class="rt"></span>
        <span class="rb"></span>
        <span class="lb"></span>
    </div>

CSS

.wrap{
    position: relative;
    display: inline-block;
    margin: 50px 100px;
    border: 1px solid #ccc;
}

span{
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    z-index: -1;
    
}

.lt{
background-image: linear-gradient(80% 0%, rgb(227,237,41) 50%, rgb(36,63,171) 50%); 
    background-image: -o-linear-gradient(80% 0%, rgb(227,237,41) 50%, rgb(36,63,171) 50%); 
    background-image: -moz-linear-gradient(80% 0%, rgb(227,237,41) 50%, rgb(16,13,71) 50%); 
    background-image: -webkit-linear-gradient(80% 0%, rgb(227,237,41) 50%, rgb(36,63,171) 50%); 
    background-image: -ms-linear-gradient(80% 0%, rgb(227,237,41) 50%, rgb(36,63,171) 50%);  
    background-image: -webkit-gradient(     linear,     80% 0%,     10% 10%,     color-stop(0.5, rgb(227,237,41)),     color-stop(0.5, rgb(36,63,171)) );
    clip: rect(auto, 175px, 175px, auto);
}

.rt{
background-image: linear-gradient(80% 0%, rgb(227,237,41) 50%, rgb(36,63,171) 50%); 
    background-image: -o-linear-gradient(80% 0%, rgb(227,237,41) 50%, rgb(36,63,171) 50%); 
    background-image: -moz-linear-gradient(60% 0%, rgb(227,237,41) 50%, rgb(116,13,71) 50%); 
    background-image: -webkit-linear-gradient(80% 0%, rgb(227,237,41) 50%, rgb(36,63,171) 50%); 
    background-image: -ms-linear-gradient(80% 0%, rgb(227,237,41) 50%, rgb(36,63,171) 50%);  
    background-image: -webkit-gradient(     linear,     80% 0%,     10% 10%,     color-stop(0.5, rgb(227,237,41)),     color-stop(0.5, rgb(36,63,171)) );
    clip: rect(auto, auto, 175px, 175px);
}

.rb{
background-image: linear-gradient(80% 0%, rgb(227,237,41) 50%, rgb(36,63,171) 50%); 
    background-image: -o-linear-gradient(80% 0%, rgb(227,237,41) 50%, rgb(36,63,171) 50%); 
    background-image: -moz-linear-gradient(0% 30%, rgb(16,13,71) 50%, rgb(116,213,71) 50%); 
    background-image: -webkit-linear-gradient(80% 0%, rgb(227,237,41) 50%, rgb(36,63,171) 50%); 
   ...