JSFiddle - React, Tailwind, and code Playground

by Anand Chowdhary

HTML

<div class="b">Namaste</div><div class="a"></div>

CSS

div {
    margin: 0 auto;
    width: 50%;
    height: 10px;
}
div.b {
    margin-top: 50px;
    background: #aaa;
    height: 300px;
}
div.a {
-webkit-mask-box-image: -webkit-gradient(linear, left top, right top, color-stop(0.0, rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, .8)), color-stop(1.0, rgba(0, 0, 0, 0)));
background: -webkit-gradient(linear,left top,left bottom,from(rgba(0, 0, 0, .3)),to(transparent));
}