JSFiddle - React, Tailwind, and code Playground

HTML

<div class="element">
    <p>Lorem ipsum dolor sit … amet.</p>
</div>

CSS

* {
    margin: 0px;
    padding: 0px;
}
.element {
    width: auto;
    height: 300px;
    overflow: hidden;
    color: #fff;
    background: #000045;
    -webkit-mask-position: 0 0;
    /*-webkit-mask-size: 200px 200px;*/
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 87, 153, 0)), color-stop(19%, rgba(30, 87, 153, 0.66)), color-stop(29%, rgba(45, 70, 237, 1)), color-stop(100%, rgba(45, 70, 237, 0)));
}