JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

* { padding: 0; margin: 0; }
div:before {
    content: "";
    position: absolute;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
    top: 0%;
    min-width: 100%;
    min-height: 3em;
}

div:after {
    content: "";
    position: absolute;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#000));
    top: 100%;
    min-width: 100%;
    min-height: 3em;
}