JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<div id="nav">
    <ul>
        <li><a href="nv1.html">1</a></li> 
        <li><a href="nv2.html">2</a></li>
        <li><a href="nv3.html">3</a></li> 
        <li><a href="nv4.html">4</a></li>
        <li><a href="nv5.html">5</a></li>
        <li><a href="nv6.html">6</a></li>
        <li><a href="nv7.html">7</a></li>
        <li><a href="nv8.html">PROMOTIONS</a></li>
        <li><a href="nv9.html">TRANSPORTATION</a></li>
    </ul>
</div>
    <div id="sidebar"></div>
    <div id="content"></div>
</div>

CSS

body {
    font-family:Arial, Helvetica, sans-serif;
    background-image: url('../Images/Background1.jpg');
}


#wrapper {
    width: 1000px;
    margin: 0px auto;
}


#header {
    background-color:#FFFFFF;
    width: 100%;
    overflow: hidden;
    padding: 10px 0px;
}
#logo img {
    float: left;
}
#logo1 img {
    margin-top: 30px;
    float: right;
}


#banner {
    width: 100%;
    height: 50px;
    background-color: #666666;
    color:#FFFFFF;
    padding: 10px 0px;
}
li {
    list-style-type: none;
}
#nav {
    background-color: #333333;
    font-size: 13px;
    clear: both;
}
#nav ul {
    width: 100%;
    float: left;
    background-color: #333333;
    margin: 0px;
    padding:0;
}
#nav ul li{
    display: inline;
}
#nav a:link {
    color: white;
}
#nav a:visited {
    color: white;
}
#nav a:active {
    color: white;
}
#nav a:hover {
    color: white;
    background-color: #CCCCCC;
}
#nav a:focus {
    color: white;
}


#sidebar  {
    width: 300px;
    height: 700px;
    float: left;
    background-color:#CCCCCC;
}


#content {
    width: 700px;
    float: right;
    height: 700px;
    background-color: #E5E5E5;
    overflow: auto;
}


#footer {
    width: 100%;
    background-color: #666666;
    padding: 20px 0px;
}