JSFiddle - React, Tailwind, and code Playground

by duncan

HTML

<div class="main"> 
  <div class="header"></div> 
  <div class="nav"> 
    <ul>
        <li><a href=""><img src="images/nav/home.png" /></a></li> 
        <li><a href=""><img src="images/nav/values.png" /></a></li> 
        <li><a href=""><img src="images/nav/team.png" /></a></li> 
        <li><a href=""><img src="images/nav/about.png" /></a></li>
     </ul> 
    </div> 
   <div class="text">Right</div> 
  </div>

CSS

body {
    padding:0px;
    margin:0px;
    background:url(../images/background.png) repeat;
    color:#525252;
    font-family: Tahoma, Verdana, Arial;
    }

    .main {
    height:auto;
    width:1000px;
    background-color:#FFF;
    border-left:1px solid #858585;
    border-right:1px solid #858585;
    margin-left:auto;
    margin-right:auto;
    }

    .header {
    background:url(../images/logo.png) no-repeat;
    margin-left:auto;
    margin-right:auto;
    width:998px;
    height:200px;
    }

    .nav {
    background:url(../images/navigation.jpg) no-repeat;
    margin-left:auto;
    margin-right:auto;
    width:998px;
    height:200px;
    background:#ccc
    }

    .nav ul {
    list-style-type:none;
    padding:0px;
    margin:0px;
    }

    .nav li {
    display:inline-block;
    float:left; 
    padding-left:25px;
    padding-right:25px;
    padding-top:12px;
    background:#000;
    }

    .text {
    float:right;
    width:100%;
    height:auto;
    min-height:100px;
    background-color:red;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    }