JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<style>
body {
background: url("https://images.ctfassets.net/hrltx12pl8hq/3MbF54EhWUhsXunc5Keueb/60774fbbff86e6bf6776f1e17a8016b4/04-nature_721703848.jpg") no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100vh;
}

.glass {
width: 500px;
height: 200px;
background: inherit;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -100px;
border-radius: 6px;
z-index: 1;
box-shadow: 0 0 200px 0 rgba(0, 0, 0, .2);
}

.glass:before {
width: 550px;
height: 250px;
content: "";
position: absolute;
top: -25px;
left: -25px;
bottom: 0;
right: 0;
background: inherit;
box-shadow: inset 0 0 0 180px rgba(255,255,255,0.2);
filter: blur(10px);
z-index: -1;
}
</style>
</head>

<body>

<div class="glass"></div>

</body>