JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="block">
    <div class="blur">

    </div>
    <div class="content">
      <h3>
       A bunch of stuff
      </h3>
      <p>
       This is supposed to be content.
      </p>
      <p>
       That the box will wrap around
      </p>
    </div>
  </div>
</div>

CSS

.container{
    background: url('https://i.imgur.com/Q13QJrB.jpg') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.block{
    width: 50%;
    margin: 30px auto 30px auto;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.40);
    position: relative;
}

.blur{
    background: url('https://i.imgur.com/Q13QJrB.jpg') no-repeat center center;
    background-size: cover;
    overflow: hidden;
    z-index: 50;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    filter: blur(10px);
}

.content{
  width: 100%;
  height: 100%;
  z-index: 100;
  position: relative;
}