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="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>

</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; 
	}