JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<body id="htmlbody">
<div id="container">
    <div id="header">
        <img src="images/bigLOGO.png" />
    </div>
    <div id="nav">
        <ul>
            <li><a href="index.html">HOME</a></li>
            <li><a href="services.html">SERVICES</a></li>
            <li><a href="about.html">ABOUT</a></li>
            <li><a href="contact.html">CONTACT</a></li>
        </ul>
    </div>
    <div id="body">
        <img src="images/homeCONTENT.png" id="homecontent">
        <p id="hometext">
            Some Slogan text
        </p>

    </div>      
</div>
<div id="footerImageBanner">
          <img src="images/LogoVersion2Small.png" />
     </div>
    <div id="footercontainer">
                <p id="footertextsmall">
                    Address:
                    <span id="footertextsmall">Some address</span>
                </p>
                <p id="footertextsmall">
                    Copyright
                    <span id="footertextsmall">@2014</span>
                </p>
                <p id="footertextsmall">
                    Phone:
                    <span id="footertextsmall">(xxx)xxx-xxxx</span>
                </p>
     </div>
    </body>

CSS

#htmlbody{
 margin:0px;
 padding:0px;
 background-color:#000000;
 }
#container
{
width: 100%;
min-width:500px;
height: 100%;
margin: 0px;
padding: 0;
overflow:hidden;
}
#container div{
    margin:10px;
}
#header
{
margin: 0px;
padding: 0px;
width: 100%;
min-width:500px;
height: 100px;
background-image: url('images/headerBG.png');
background-size: auto;
display: block;
background-color:#fff;
border:1px solid #ddd;
}

#header img
{
display: block;
margin-left: auto;
margin-right: auto;
} 

#nav
{
margin: 0px;
padding: 0px;
width: 100%;
min-width:500px;
height: 54px;
background-image: url('images/navbarBG.png');
background-repeat: repeat-x;
text-align: center;
    border:1px solid #ddd;
    background-color:#fff;
}

#nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
display: inline-block;
vertical-align: middle;
}

#nav li
{
margin: 0px;
padding: 0px;
float: left;
}

#nav a
{
margin: 0px;
padding-right:6px;
padding-left:-3px;
width: 114px;
height: 50px;
background-image: url('images/btn.png');
background-repeat: no-repeat;
text-decoration: none;
text-transform: uppercase;
text-align:center;
color: #ffffff;
display: table-cell;
vertical-align: middle;
text-shadow: 2px 2px 2px #333333;
}

#nav a:hover
{
background-image:url('images/btnHover.png'); 
}

#body
{
margin: 0px;
padding: 0px;
width: 100%;
min-width:500px;
height:auto;
min-height:500px;
background-image: url('images/contentBG.png');
background-repeat: repeat;
overflow:auto;
    background-color:#fff;
}

#homecontent
{
width: 100%;
min-width:500px;
height: auto;
margin-top: 40px;
margin-bottom:0px;
   
}

#hometext
{
padding:0px;
margin-top:20px;
margin-bottom:0px;
text-transform: uppercase;
color: #cccccc;
text-shadow: 2px 2px 5px #000000;
font-size: 165%;
font: arial;
text-align: center;
}

#hometextsmall
{
color: #cc9966;
text-align: center;
font-size:...