JSFiddle - React, Tailwind, and code Playground

HTML

<div id="moz-reflect">
    <img src="http://lorempixel.com/400/200/" />
    <img src="http://lorempixel.com/400/200/" />
</div>

CSS

body {
    background: #000;
}

#moz-reflect:after {
    content:"";
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.67) 49%, rgba(0, 0, 0, 1) 100%);
}
#moz-reflect img:nth-of-type(2) {
    -webkit-transform: scaleY(-1);
       -moz-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
         -o-transform: scaleY(-1);
            transform: scaleY(-1); 
}
#moz-reflect {
    position: relative;
}