JSFiddle - React, Tailwind, and code Playground

by vikaskbh

HTML

<body>
      
<div class="parent">
    <div class="semi_transparent_bg">
    </div>
    <div class="child_content">
        <h2>My awesome page title</h2>
    </div>
</div>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque animi assumenda explicabo labore quidem odio repudiandae distinctio consequuntur quas libero temporibus delectus rem provident autem magnam recusandae vero aut fugit.</p>
    
<div class="st_div_container">
    <div class="st_content">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque animi assumenda explicabo labore quidem odio repudiandae distinctio consequuntur quas libero temporibus delectus rem provident autem magnam recusandae vero aut fugit.</p>
    </div>
</div>    
    
</body>

CSS

body{
    background-image: url('http://i2.minus.com/iEWiD93Z1gZze.jpg');
    background-position:-400px 0;
    background-repeat: no-repeat;    
    font-family:verdana;
    color:white;
}
p{
    font-size:12px;
    padding: 10px;
}
.blackBG{
    background-color: #000;
}
.parent{
    position:relative;    
    width: 300px;
    height:30px;
   
}
.semi_transparent_bg{
    position: absolute;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
    background-color: #fff;
    width: 300px;
    height:30px;
     border-radius:3px;
    z-index:1;
}
.child_content{
    position:absolute;
    width: 300px;
    height:30px;
    z-index:2;
}
.child_content h2{
    font:bold 24px/30px Arial, Sans-serif;
    padding:0;
    margin:0;
    color:black;
    text-align: center;
}

/**** reusable classes ****/

.st_div_container{
    position:relative;    
    width: 100%;   
}
.st_bg{
    position: absolute;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
    width: 100%;
    border-radius:3px;
    z-index:1;
}
.st_content{
    position:absolute;
    width: 100%;
    z-index:2;
}

JavaScript

(function ( $ ) { 
    $.fn.adjustBGHeight = function() {
        $(this).parent().css('height',$(this).height()+"px");
        $(this).parent().prepend('<div class="st_bg blackBG"></div>');
        $('.st_bg').css('height',$(this).height()+"px");        
        return this;
    }; 
}( jQuery ));
$('.st_content').adjustBGHeight();