JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div class="ratio-1439-330 bg-cover" style="background-image: url('https://www.agtinternational.com/wp-content/uploads/2013/11/City-solution.jpg');">
<div class="l-center" style="max-width: 1240px;">
<div class="square-logo bg-cover"
style="background-image:url('http://www.astronautamarcospontes4077.com.br/wp-content/uploads/2014/07/person-icon.png');">
</div>
<div class="header-cover" style="background-color: #373737; opacity: 0.9; position: absolute; bottom: 0; left:0; width: 100%; overflow: hidden; padding: 10px 0;">
<div class="l-center" style="max-width: 1240px">
<div class="nav nav-tabs" style="margin-left: 338px">
<a class="active" href="#overview" data-toggle="tab">
Overview
</a>
<a href="#visits" data-toggle="tab">
Visit
</a>
</div><!-- ./tab-lined-top-->
</div><!--tabs-->
</div><!--header cover-->
</div>
</div>
<div class="tab-content l-center" style="max-width: 1240px;">
<div id="overview" class="tab-pane active">
<div class="l-center" style="max-width: 1240px;background:red;">
TEST 1
</div>
</div><!--#overview-->
<div id="visits" class="tab-pane">
<div>
TeST 2
</div>
</div>
</div><!--tab-content-->
CSS
[class*="ratio"] {
position: relative; }
[class*="ratio"]:after {
content: '';
display: block; }
[class*="ratio"] .cly-ratio-content {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0; }
.ratio-1439-330:after {
padding-top: 22.932592078%; }
.l-center{
margin: 0 auto;
}
.square-logo{
background: #fff;
position: absolute;
width: 180px;
height: 180px;
bottom: 25px;
left: 0;
margin-left: 115px;
z-index: 800;
opacity: 1;
}
.bg-cover{
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.nav-tabs{
border-bottom: 0;
}
.nav{
margin-bottom: 0;
}