JSFiddle - React, Tailwind, and code Playground

HTML

<div class="all">	
	<div class="content">		
		<div class="text">Então é natal</div>
		<img src="http://placehold.it/180x90">
	</div>	
</div>

CSS

.all{
	width: 100%;
    height: 100%;
    background-image: url(https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/GAojbUa/abstract-fire-background-loop_41lvbfqze__F0000.png);
    position: absolute;
    top: 0;
    left: 0;
	border: 1px solid;
}
.content{	
	width: 180px;
    height: 90px;
    position: absolute;
    left: 50%;
    top: 50%;    
    transform: translate(-50%, -50%);
    border: 1px solid;
    overflow: hidden;
	border-radius:4px;
	padding:10px;
}
.content>img{
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20x);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.5;
}
.content>.text{	
	text-align: center;
}