JSFiddle - React, Tailwind, and code Playground

by vals

HTML

<body>
<div class="test1">
</div>

CSS

div {
    position: absolute;
    width: 321px;
    height: 300px;
    margin:0;
    padding:0;
    border:0;
    outline:0;
    top: 0px;
}

.test1 {
    background-image: linear-gradient(90deg, black, red), linear-gradient(0deg, white, yellow);
    background-position: 0px 0px, 0px 0px;
    background-size: 100% 100px, 100% 50px;
    background-repeat: no-repeat, repeat-y;    
}