JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id = "wrapper">
        Piece of text inside a 500px width div centered on the page


<div id="site-title"><a href="#"></a></div>
<header>
    <nav>
        <ul>
            <li><a href="#">T-Shirts</a></li>
            <li><a href="#">Jackets</a></li>
            <li><a href="#">Caps</a></li>
            <li><a href="#">Toys</a></li>
            </ul>
    </nav>

</header>

<div style="clear:both;"></div>
<br>

<section>
    <section>
            <div class="banner">
            <img src="img/cloud-9-banner.png" class="bannerimg">
            </div>
<br>
<br>


            <div class = "one">one
            <h1>Blue Bolt</h1>





<ul>
        <li> list number 1 </li>
        <li> list number 2 </li>
        <li> list number 3 </li>
</ul>



        </div>

            <div class="two">two
    <h1>Blue Bolt</h1>

    <ul>
    <li> list number 1 </li>
    <li> list number 2 </li>
    <li> list number 3 </li>
</ul>
            </div>
            <div class="three">three
                    <h1>Blue Bolt</h1>
    <ul>
    <li> list number 1 </li>
    <li> list number 2 </li>
    <li> list number 3 </li>
</ul>
</div>

</section>
<!-- end boxes -->

CSS

html {overflow:auto; 
    height:100%;
    font-size:62.5%;
    font-family: Arial,Helvetica,sans-serif;
}


body{
 margin: 0;
text-align: center;
 background-color: #f1f1f1;
}

#wrapper{
    max-width: 1000px;
    background: #005397 none repeat scroll 0 0;
    box-shadow: 0 0 35px #333;
    margin: 0 auto;
    height: 900px;

}
#site-title {
    margin-right: 20px;
    padding:1em 0 0 1em;
    float:left;
    }

#site-title a {

    width:175px;
    height:53px;
    display:block;
    text-decoration: none;
    background: url('../img/cloud-strike-logo.png') no-repeat;
        }


@font-face {
    font-family: 'Trek';
    src: url('fonts/Trek.eot'); /* IE9 Compat Modes */
    src: url('fonts/Trek.eot?iefix') format('embedded-opentype'), 
         url('fonts/Trek.woff') format('woff'), /* Modern Browsers */
         url('fonts/Trek.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('fonts/Trek.otf')  format('opentype'), /* Safari, Android, iOS */
         url('fonts/Trek.svg#Trek') format('svg'); /* Legacy iOS */
    }           


header { 
overflow: auto;
border: 2px solid #000;
width:80%;
height:100px;
margin: 0px auto;
color: #FFFFFF

}
nav{
display: block;
float: right;
margin:.4em 0;
width: auto;
}
nav ul {
list-style: none;
margin: 0;
padding-left: 0
}
nav li {
float: left;
position: relative;

}
nav a{
display: block;
line-height: 3.333em;
padding: 0 .5em 0 .5em;
text-decoration: none;
font-family: "arial,times new roman";
font-size:100%;
color:#fff;
font-weight:none;
}

section {
width: 80%;
margin:2 auto;
height:450px; 
display:block;
position: relative;
}
.banner {
background: #739ec2;
background: -moz-linear-gradient(#c0c0c0, #ffffff); 
        background: -o-linear-gradient(#c0c0c0, #ffffff); 
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c0c0c0), to(#ffffff)); /* older webkit syntax */
        background: -webkit-linear-gradient(#c0c0c0, #ffffff); 

width:98%;
height:210px;
display:block;
margin-top: 1%;
margin:...