JSFiddle - React, Tailwind, and code Playground

by Craig Haywood

HTML

<div id="container">
    <div id="contents">
       <img src="https://t4.ftcdn.net/jpg/04/57/84/07/360_F_457840795_dXtSaCaqvc45P1T0u6P7MjdVMA7SxD1r.jpg">
    </div>
    <div id="gradient">
    </div>
</div>

CSS

#container {
    position:relative;
    padding:50px;
    margin:50px;
}
#contents {
    background:white;
}
#gradient {
    position:absolute;
    z-index:2;
    right:0; bottom:0; left:0;
    height:300px;
    background: none;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );

}
body {
  background: red
}