JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
	Loriem <a href="https://google.com" target="google">ispsum</a> is simpaly dummy text<br>
	Loriem ispsum is simpaly dummy text<br>
	Loriem ispsum is simpaly dummy text<br>
	Loriem ispsum is simpaly dummy text<br>
	Loriem ispsum is simpaly dummy text<br>
	Loriem ispsum is simpaly dummy text<br>
	Loriem ispsum is simpaly dummy text<br>
	Loriem ispsum is simpaly dummy text<br>
	Loriem ispsum is simpaly dummy text<br>
	Loriem ispsum is simpaly dummy text<br>
	Loriem ispsum is simpaly dummy text<br>
	Loriem ispsum is simpaly dummy text<br>
	Loriem ispsum is simpaly dummy text<br>
</div>

CSS

body {
	background: #000;
}
.content {
	width: 500px;
	height: 300px;
	position: relative;
	color: #fff;
	overflow: hidden;

	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent));
	-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
	mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent));
	mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}