JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

CSS

div{

        width: 200px;

        height: 100px;

        background: -webkit-radial-gradient(50% 100%,blue 0px, blue 20px, red 20px, red 40px, yellow 40px, yellow 60px, green 60px, green 80px, blue 80px, blue 100px,#fff 100px);

        border-radius: 100% 100% 0 0;

    }