JSFiddle - React, Tailwind, and code Playground

CSS

html {
    height: 100%;
}
body {
    background-color: white;
    background-image: -webkit-linear-gradient(blue, white);
    background-repeat: no-repeat;
    background-size: 100% 120px;
    height: 100%;
    position: relative;
}
body:after {
    background-color: green;
    background-image: -webkit-linear-gradient(white, green);
    bottom: 0;
    content: '';
    height: 120px;
    left: 0;
    position: absolute;
    right: 0;
}