JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

body {
   background: url("http://static.tumblr.com/thpaaos/YbJkqnqr6/bg.jpg") repeat;
}

div {
    border: 10px solid red;
    width: 100%;
    height:300px;
    
    /* Webkit */
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(1, rgba(0,0,0,0.0)), /* Top */
        color-stop(0, rgba(0,0,0,1.0)) /* Bottom */
    );
  
    /* Gecko */  
    background: -moz-linear-gradient(
        center bottom,
        rgba(0,0,0,1.0) 0%, /* Bottom */
       rgba(0,0,0,0.0) 100% /* Top */
    );
}