JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
	<div id="background_border">
    
        <div id="header">
        	<span class="right_header">Call Now (555) 555-5555</span>
        </div>
        
		<div id="nav">
        	<ul>
            	<li><a href="#">Home</a></li>
                <li><a href="#">Company Overview</a></li>
                <li><a href="#">Our Services</a></li>
                <li><a href="#">Registration</a></li>
                <li><a href="#">News & Blog</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">Contact us</a></li>
            </ul>
        </div>
		
        <div id="slideshow"><p>&nbsp;</p></div>
                
        <div class="promo_container">
        	<div class="promo one"><p>&nbsp;</p></div>
            <div class="promo two"><p>&nbsp;</p></div>
            <div class="promo three"><p>&nbsp;</p></div>
            <div class="promo four"><p>&nbsp;</p></div>       
        </div>
        
        <div class="clear-fix"></div>
        
        <div id="body"></div>
        
        <div id="footer">
        	<ul>
				<li><a href="#">Home</a></li>
                <li><a href="#">Company Overview</a></li>
                <li><a href="#">Our Services</a></li>
                <li><a href="#">Registration</a></li>
                <li><a href="#">News & Blog</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">Contact us</a></li>
            </ul>
        </div>
    
    </div>
</div>

CSS

@charset "utf-8";
/* CSS Document */

/* Body and Container */
body{margin: 15px; padding: 0px; background-color: #000; font-family:Arial, Helvetica, sans-serif; font-size: 14px; color: #333;}
#container {margin: auto; padding: 10px; width: 1005px; background-color: #fff;}

/* Background Border */
#background_border{background: url(images/bg_image.jpg) no-repeat;}

/* Header */
#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}


/* Nav */

#nav{margin: auto; width:1005px; height:60px; background-color: #f6f449; color:#000; border: 1px solid #000;}
#nav ul {}
#nav ul li{display: inline-block; padding: 8px 25px;}
#nav ul li a {text-decoration: none; color: #000; font-weight: bold;}
#nav ul li a:hover {text-decoration: none; color: #F60; font-weight: bold;}

/* Slideshow */

#slideshow{margin: auto; width: 1005px; height: 463px; border: 1px solid #333; background: url(../images/header.jpg) no-repeat;}

/* 4 Promo Boxes */

.promo_container {margin-top: 10px; width: 987px; height: 172px; padding: 10px; background-color: #ccc;}
.promo_container .promo {float: left; }

/* Promo Image Paths */
.promo.one {background-image: url(../images/ad_box1.png); width: 253px; height: 171px;}
.promo.two {background-image: url(../images/ad_box2.png); width: 253px; height: 171px;}
.promo.three {background-image: url(../images/ad_box3.jpg); width: 253px; height: 171px;}
.promo.four {background-image: url(../images/ad_box4.png); width: 228px; height: 171px;}

/* Clear Float */
.clear-fix { clear: both; line-height: 1px;}

/* Footer */

#footer ul {}
#footer ul li{display: inline-block; padding: 8px 25px;}
#footer ul li a {text-decoration: none; color: #000; font-weight: bold;}
#footer ul li a:hover {text-decoration: none; color: #F60; font-weight: bold;}
.right_header {
color: #fff;
float: right;
}