JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text">
    <div class="shadow"></div>
    Text excedes max height of div<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
</div>

<div class="text">
    <div class="shadow"></div>
    Text does not excedes max height of div<br />
    Text text text text<br />
    Text text text text<br />
    Text text text text<br />
</div>

CSS

.text {
    position:relative;
    width:200px;
    max-height:10em;
    overflow:hidden;
}
.shadow {
    position:absolute;
    top:8em;
    width:100%;
    height:2em;
    background: -webkit-linear-gradient(transparent, white);
    background: -o-linear-gradient(transparent, white);
    background: -moz-linear-gradient(transparent, white);
    background: linear-gradient(transparent, white);
}