JSFiddle - React, Tailwind, and code Playground

by ShaCP

HTML

<div class="parent">
 <div class="child">
 Hello I am child 
 </div>
</div>

CSS

body{
    background:green;
}
.parent{
    width:300px;
    height:300px;
    position:relative;
    border:1px solid red;
}
.parent:after{
    content:'';
    background:url('http://www.dummyimage.com/300x300/000/fff&text=parent+image');
    width:300px;
    height:300px;
    position:absolute;
    top:0;
    left:0;
    opacity:0.5;
}
.child{
    background:yellow;
    position:relative;
    z-index:1;
}