JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="image">
    <div class="reflect">
        <img src="http://i.imgur.com/LukIbK7.jpg" />
    </div>
</div>

CSS

.image {
    width:100%;
    margin:auto;
    text-align:center;
}
.reflect {
    width:50%;
    margin:auto;
    -webkit-box-reflect: right -2px -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 1)))
}
.image img {
    width:100%;
    -webkit-box-reflect: left 0px -webkit-gradient(linear, right top, left top, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 1)));
}