JSFiddle - React, Tailwind, and code Playground

HTML

<div class="HeaderWrap">
    <div class ="Header">
        <div class="HeaderLogo"></div>
    </div>
</div>  

<div class="BodyWrap">
    <div class="Body">  
        <div class="BodyLeft"></div>
        <div class="BodyRight"></div>   
    </div>  
</div>

<div class="FooterWrap">
    <div class="Footer">
        <div class="FooterPicture"></div>
        <div class="Footer1"></div>
        <div class="Footer2"></div>
        <div class="Fotter3"></div>
        <div class="Footer4"></div>
    </div>
</div>

CSS

.HeaderWrap,
.BodyWrap,
.FooterWrap{float:left; width:100%; border:1px solid yellow; clear:both;}

.Header,
.Body,
.Footer{width:960px; border: 1px solid green; margin:0 auto; clear:both; display: table-cell;}

.Header{height:227px; background:url("../Images/man-with-flag-1.png") no-repeat;#box-shadow: 0 0 20px 0 black; z-index:-1; clear:both;}
.HeaderLogo{float:left; height:100px; width:150px; box-shadow: 10px 10px 5px #000000; background:url("../Images/visa.png") no-repeat; position:relative; right:-45px; bottom:-165px; border:5px solid white; z-index:999;clear:both;}

.BodyWrap {border: 1px solid red;}
.Body {position: relative; border: 1px solid green; min-height: 450px; clear:both;}

.BodyLeft{float:left; height:900px; #min-height: 900px; border:1px solid yellow; position: relative; #top: -90px; z-index:-1;background:#b1b6bc; #box-shadow: 0 0 15px 0  black; width:26%; clear:both;}