JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box grad-to-top"></div>

<div class="box grad-to-bottom "></div>

<div class="box grad-to-bottom-with-color-stops"></div>

<div class="box grad-to-top-left"></div>

CSS

.box {
    width: 250px;
    height: 100px;
    margin: 10px auto;
    border: 1px solid #ccc;
}

.grad-to-top {    
    background: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
    background-image: -webkit-linear-gradient(top, #fff, #000);
    background-image:    -moz-linear-gradient(top, #fff, #000);
    background-image:      -o-linear-gradient(top, #fff, #000);
    background-image: linear-gradient(to bottom, #fff, #000);
}

.grad-to-bottom {    
    background: #fff;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#000));
    background-image: -webkit-linear-gradient(bottom, #fff, #000);
    background-image:    -moz-linear-gradient(bottom, #fff, #000);
    background-image:      -o-linear-gradient(bottom, #fff, #000);
    background-image: linear-gradient(to top, #fff, #000);
}


.grad-to-bottom-with-color-stops {    
    background: #fff;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(1, #000));
    background-image: -webkit-linear-gradient(bottom, #fff 0%, #000 100%);
    background-image:    -moz-linear-gradient(bottom, #fff 0%, #000 100%);
    background-image:      -o-linear-gradient(bottom, #fff 0%, #000 100%);
    background-image: linear-gradient(to top, #fff 0%, #000 100%);
}

.grad-to-top-left {
        background-image: -webkit-gradient(linear, right bottom, left top, from(#fff), to(#000));
    background-image: -webkit-linear-gradient(bottom right, #fff, #000);
    background-image:    -moz-linear-gradient(bottom right, #fff, #000);
    background-image:      -o-linear-gradient(bottom right, #fff, #000);
    background-image: linear-gradient(to top left, #fff, #000);
}