JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    {% block head %}
    <link rel="stylesheet" href="style.css" />
    <title>{% block title %}{% endblock %}</title>
    {% endblock %}
</head>
<body>
<div id="container">
    <div id="header">
        <h1>
            <img src="http://i903.photobucket.com/albums/ac232/PatrickCliff/logo.png">
        </h1>
        <ul>
            <li>Username</li>
            <li>Badges</li>
            <li>Sponsors</li>
        </ul>
    </div>
    <div id="navigation">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Sponsors</a></li>
            <li><a href="#">More</a></li>
        </ul>
    </div>
    <div id="content-container">
        <div id="content">
            <h2>
                all individual page info goes here
            </h2>
<div id="content">{% block content %}{% endblock %}</div>           

        </div>
        <div id="aside">
            <h3>
                possible extra section goes here
            </h3>

        </div>
        <div id="footer">
            Copyright © Site name, 20XX
        </div>
    </div>
</div>
<body>
</html>

CSS

body {
    background:  #E0EEEE;
}
#container
{
    margin: 0 auto;
    width: 900px;
    background: #fff;
}

#header
{
    background: #66CDAA;
    padding: 20px;
    padding-bottom: 160px;
}

#header img 
{ 
    width: 400px;
    display: inline;
    float: left;
    background: #66CDAA;
}
#header ul 
{ 
    margin: 0;
    float: right;
    background: #66CDAA;
    display: inline;
}


#navigation
{
    float: left;
    text-align: right;
    width: 900px;
    background: #333;
}

#navigation ul
{
    margin: 0;
    padding: 0;
    float: right;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li a
{
    display: block;
    float: left;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }

#content-container
{
    float: left;
    width: 900px;
    background: #E0EEEE url(/wp-content/uploads/layout-two-fixed-background.gif) repeat-y 100% 0;
}

#content
{
    clear: left;
    float: left;
    width: 560px;
    padding: 20px 0;
    margin: 0 0 0 30px;
    display: inline;
}

#content h2 { margin: 0; }

#aside
{
    float: right;
    width: 240px;
    padding: 20px 0;
    margin: 0 20px 0 0;
    display: inline;
}

#aside h3 { margin: 0; }

#footer
{
    clear: both;
    background: #458B74;
    text-align: right;
    padding: 20px;
    height: 1%;
}