JSFiddle - React, Tailwind, and code Playground
HTML
<div class="b-logo-wrapper">
<div class="b-logo">
</div>
</div>
<div class="b-menu-wrapper">
<div class="b-menu">
menu
</div>
</div>
<div class="b-content-wrapper">
<div class="b-content">1<br>1<br>1<br>1<br>1<br></div>
<div class="b-content">2<br>2<br>2<br>2<br>2<br></div>
<div class="b-content">3<br>3<br>3<br>3<br>3<br></div>
<div class="b-content">4<br>4<br>4<br>4<br>4<br></div>
</div>
<div class="b-footer-wrapper">
<div class="b-footer">
footer
</div>
</div>
CSS
.b-logo-wrapper {
width: 800px;
margin: 0 auto;
}
.b-logo {
width: 169px;
height: 60px;
background: #a6a;
}
.b-menu-wrapper {
width: 100%;
background: #6a6;
}
.b-menu {
height: 60px;
width: 800px;
margin: 0 auto;
}
.b-content-wrapper {
width: 800px;
margin: 0 auto;
overflow: hidden;
}
.b-content {
width: 190px;
margin-right: 10px;
background: #16A;
float: left;
}
.b-footer-wrapper {
width: 100%;
background: #bb5;
}
.b-footer {
width: 800px;
height: 60px;
margin: 0 auto;
}