JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.6/jquery.jgrowl.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.6/jquery.jgrowl.js"></script>

<script type="text/javascript">
$(function() {
$.jGrowl("<div class='test'><span class='test2'></span>Hello World</div>", { 
	  	  	position: 'top-right',
	  	   	life: 3000 
	  	});
		});
  </script>

CSS

.test {
  position: relative;  
  z-index: 10;

}

.test2{
background-color:rgba(102, 204, 153,0.95);
color:#fff;
font-weight:bold;
border:1px #fff solid;
filter: blur(5px) ;
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: -1;
  
}