JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div id="gradient"></div>

CSS

body { background: #f5f6f7; }

#gradient {
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #eeeeee 86%, #eeeeee 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(86%,#eeeeee), color-stop(100%,#eeeeee));
    background: -webkit-linear-gradient(top, #ffffff 0%,#eeeeee 86%,#eeeeee 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#eeeeee 86%,#eeeeee 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 86%,#eeeeee 100%);
    background: linear-gradient(top, #ffffff 0%,#eeeeee 86%,#eeeeee 100%);
    position: relative;
    height: 200px; 
    width: 80%;
    margin: 100px auto;
    border-top: 1px solid  rgba(165,165,165,0.65);
    border-bottom: 1px solid #fff;
   -webkit-border-radius:2px;
      -moz-border-radius: 2px;
        -ms-border-radius: 2px;
           -o-border-radius: 2px;
               border-radius: 2px;
}

#gradient:after,
#gradient:before {
    content: ' ';
    height: 100% !important;
    left: 0px;
    position: absolute;
    bottom: 0px;
    width: 1px !important;
    z-index: 4;
  
background: -moz-linear-gradient(top, rgba(165,165,165,0.65) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(165,165,165,0.65)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(165,165,165,0.65) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(165,165,165,0.65) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(165,165,165,0.65) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(top, rgba(165,165,165,0.65) 0%,rgba(0,0,0,0) 100%);
}

#gradient:before {
  left: auto;
  right: 0px;
}
#gradient:after {
  left: 0px;
  right: auto;
}

JavaScript

// http://forrst.com/posts/Gradient_Border_using_CSS3-I6i