JSFiddle - React, Tailwind, and code Playground

by SvetaGr

HTML

<div class="l-main">
    <div class="l-header">
        header      
    </div>
    
    <div class="l-content">
       content
       <p>gggggg</p><br />
       <p>gggggg</p><br />
    </div><!-- /.l-content -->
</div><!--/.l-main -->

<div class="l-footer">
    footer   
</div><!-- /.l-footer -->

CSS

html, body { height: 100%; margin: 0; background: #207cca;}

.l-main {
    min-height: 100%;
       
    margin: 0 0 -70px;
    overflow: hidden;
  
    background: #ddd url(http://www.salon-kristyle.ru/wp-content/themes/salon-kristyle.ru/img/maneBg.jpg) no-repeat;
    background-size: cover;
}

.l-main:after {
    content: '';
    display: block;
    height: 70px;
}

.l-header {
    height: 100px;
    background: rgba(0,0,0,0.7);
    color: #fff;
}

.l-content {    
    position: relative;
    z-index: 1;
    
    margin-top: 50px;
    
    background: rgba(0,0,0,0.6);
    color: #fff;
}
.l-content:after {
    content: "";
    
    position: absolute;
    top: 100%;          
    left: 0;
    bottom: -2000px;
    right: 0;
    
    background: rgba(0,0,0,0.6);
}
.l-footer {
    height: 70px;
    
    position: relative;
    z-index: 1;
    
    color: #fff;
}