JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap_div">
<div class="example" id="example1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a dolor dui. Sed arcu sapien, molestie quis euismod et, varius a ipsum.</p>
</div>
</div>

CSS

.wrap_div{
width:400px;
height:200px;
padding-top:30px;
margin:0 auto;
background-image: url('http://3.bp.blogspot.com/-fbPB15rhAzE/UDj236NdopI/AAAAAAAAA4M/_PTSXoAtmzM/s1600/bg.png');
border:1px solid #aa99ff;
}
.example{
border: 1px solid #0055ee;
margin: 5px auto;
padding: 15px;
width: 250px;
}

#example1{
position:relative;
z-index: 3;
}

#example1 p:before{
content: ' ';
background:blue;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
opacity:0.8;
z-index: -1;
}