JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contentBlurContainer">
    <div class="blurBackground">
      <div class="content">
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
      </div>
    </div>    
</div>

CSS

.contentBlurContainer {
    width: 240px;
    height: 320px;
    background-position: left bottom;
    overflow:hidden;
    position:relative;
    background-image: url('https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg');
}

.contentBlurContainer .blurBackground {
    background-image:inherit;
    background-position: inherit;
    left:0;
    right:0;
    bottom:0;
    position:absolute;
}

.contentBlurContainer .blurBackground:before{
    background-image:inherit;
    background-position: inherit;
    -webkit-filter: blur(6px);
    -moz-filter: blur(6px);
    -o-filter: blur(6px);
    -ms-filter: blur(6px);
    filter: blur(6px);
    content: " ";
    width : 100%;
    height : 100%;
    position: absolute;
    left:0;
    top:0;
}

.contentBlurContainer .blurBackground .content{
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -o-filter: blur(0);
    -ms-filter: blur(0);
    filter: blur(0);
    color:white;
    padding:10px;
    background-color : rgba(0, 0, 0, 0.4);
}