JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div {
    width: 200px;
    height: 400px;
    background: linear-gradient(45deg, blue, blue 100%), linear-gradient(135deg, green, green), linear-gradient(90deg, yellow, yellow) , linear-gradient(225deg, red, red);
    background-size: 50% 50%;
    background-position: 0% 0%, 0% 100%, 100% 0%, 100% 100%;
    background-repeat: no-repeat;
    border-radius: 50%
}