JSFiddle - React, Tailwind, and code Playground

HTML

<body>



<div id="header-wrap">

<div id="header">
<div class="logo">LOGO</div>
<div class="links">VENDING MACHINES | DISTRIBUTORS | SUPPORT | CONTACT</div>
</div>
</div>

<div id="main_body">

<div id="first_area">excellent vending services</div>
<div id="second_area">

<div id="nd_a">a</div>
<div id="nd_b">b</div>
<div id="nd_c">c</div>

</div>

</div>

CSS

body{
	background-color:#fff;	
	padding:0px;
	margin:0 auto;
}

#header-wrap{
	width:100%;
	height:100px;
	margin: 0 auto;
	background:#BABABA;
	border-bottom: 1px solid #211c20;
	border-top: 1px solid #211c20;
}

#header{
    width:960px;
    height:auto;
    margin: 0 auto;
    padding-top:15px;
}

.logo{
    width:130px;
    height:50px;
    border:1px solid black;
    padding-top:20px;
    padding-left:50px;
    font-size:24px;
    float:left;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}

.links{
    float:left;
    height:50px;
    width:778px;
    font-size:24px;
	padding-top:20px;
	text-align:right;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
#main_body{
	background:#2A00FF;
	width:960px;
	height:auto;
	margin:0 auto;
}
#first_area{
	width:960px;
	height:auto;
	margin:0 auto;
	background:#E000FF;
	padding-top:150px;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size:33px;
	text-align:center;
	padding-bottom:150px;
}
#second_area{
	width:960px;
	height:auto;
	background:#22FF00;
}
#nd_a{
	width:158px;
	height:158px;
	border:1px solid black;
	float:left;
	background:#983C3D;
}
#nd_b{
	width:158px;
	height:158px;
	border:1px solid black;
	float:left;
	background:#FFCE00;
}
#nd_c{
	width:158px;
	height:158px;
	border:1px solid black;
	float:left;
	background:#C11FFF;
}