JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootswatch/3.0.0/united/bootstrap.min.css">
<body>
<!-- Header -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div id="header" class="row">
<div id="logo" class="col-md-3">LOGO</div>
<div id="nav" class="col-md-9">NAV</div>
</div>
</div>
</div>
<!-- Body -->
<div class="container">
<div class="row nav-header">
<div class="container">
<div id="switch-btn" class="col-md-3">SWITCH BUTTON</div>
<div id="search" class="col-md-9">SEARCH BUTTON </div>
</div>
</div>
<div class="row">
<div class="container">
<div id="popular-categories" class="col-md-3 "><p>POPULAR CATEGORIES</p></div>
<div id="banner-slide" class="col-md-9"><p>BANNER SLIDE</p></div>
</div>
</div>
</div>
</body>
<!-- Footer -->
<div id="footer">
<div class="container">
<div class="row">
<div id="term" class="col-md-3">TERM & CONDITIONS </div>
<div id="copyright" class="col-md-3 pull-right">COPYRIGHT</div>
</div>
</div>
</div>
CSS
.row > div {
background-color: #dedef8;
border:1px solid #000;
}
#header{
padding-top: 20px;
}
.nav-header{
background-color: #b7b7b7;
right:0;
left:0;
margin-bottom: 20px;
padding:10px;
/*width: 100%;
padding:10px;
margin-left: auto;
margin-right: auto;*/
}
#logo{
background-color: #0000FF;
}
#nav{
background-color: #FFFF00;
}
#switch-btn{
background-color: #FF00FF;
}
#search{
background-color: #FFFFFF;
padding-left: 20px;
}
#popular-categories {
background-color: #CCFFFF;
height: 240px;
}
#banner-slide{
background-color: #663300;
height: 500px;
}
#term{
background-color: #333300;
}
#footer{
background-color: #b7b7b7;
margin-top: 30px;
left: 0;
right: 0;
}
#copyright{
background-color: #005099;
}
body { padding-top: 50px;
}