JSFiddle - React, Tailwind, and code Playground

by Brett DeWoody

HTML

<body>
    <div id="main-wrapper">
      <header id="main-header">
        <img id="title-image" src="http://i.imgur.com/JaYSY.jpg" width="100%"/>
        <nav id="main-navbar">
          <ul>
            <li>
              <a href="#">Home</a>
            </li>
            <li>
              <a href="#">About</a>
            </li>
            <li>
              <a href="#">Product</a>
            </li>
            <li>
              <a href="#">Services</a>
            </li>
            <li>
              <a href="#">Support</a>
            </li>
            <li>
              <a href="#">Contact Us</a>
            </li>
          </ul>
        </nav>
      </header>
    </div>
  </body>

CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/*
 * Site styling
 */


#main-wrapper {
    width: 90%;
    margin: 0 auto;
    border: 3px solid #888;
    margin-top: 20px;
    background: white;
}

#title-image {
    width: 100%;
    display:block;
}

#main-navbar {
    width: 100%;
    background: #333333;
    margin:0;
    display:block;
    padding:0;
}

#main-navbar > ul {
    text-align: center;
    margin:0 0 0 0;
    padding:0;
    height:25px;
}

#main-navbar > ul > li {
    display:inline;
    font-weight: bold;
    margin: 0px 15px;
    height:100%;
    padding:0;
}