JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="container-blur">
	    <div class="blur"></div>
    </div>
	<div class="content">
		text<br>
		text<br>
		text<br>
		text<br>
		text<br>
		text<br>
		text<br>
		text<br>
		text<br>
	</div>
</div>

CSS

.wrapper{
    position: relative;
    width: 300px;
    height: 100px;
    margin: 100px auto;
    background-color: #C0C0C0;
    overflow-x: hidden;
    overflow-y: auto;
}
.container-blur {
    position:fixed;
    width:282px;
    top:100px;
    overflow:hidden;
    height:50px;
}
.blur{
    width: 400px;
    height: 50px;
    position: absolute;
    background-color: #000000;
    -webkit-filter: blur(10px);
    -ms-filter: blur(10px);
    -o-filter: blur(10px);
    -moz-filter: blur(10px);
    filter: blur(10px);
    left: -50px;
    top: -20px;
}