JSFiddle - React, Tailwind, and code Playground
HTML
<div class="main">
<div class="wrap_item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit optio laborum fugiat accusamus unde odit eius cum ullam asdas numquam quaerat.
</div>
</div>
CSS
.main {
display: flex;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
-webkit-filter: blur(1px);
background-image: url(images/10.jpg);
background-size: cover;
font-size:10px;
background:grey;
}
.wrap_item {
width: 20%;
background: white;
border-radius: 5px;
box-shadow: 0px 3px 20px black;
font-family: Verdana, Geneva, sans-serif;
box-sizing: border-box;
padding: 20px;
}
.wrap_item:after{
content: '';
padding: 100% 0 0;
display: block;
}