JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div>
        <img src="http://breweryartists.com/static/images/headerWithTitle.png" id="logo" />
    </div>
    <div>
        <aside>
            <nav>
                <ul>
                    <li><a href="#">Directory</a></li>
                    <li><a href="#">Events</a></li>
                    <li><a href="#" class="active">Projects</a></li>
                    <li><a href="#">Settings</a></li>
                    <li><a href="#">Logout</a></li>
                </ul>
            </nav>
        </aside>
        <div id="content">
            <header>Directory</header>
            <article>
                <p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
    
    <p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand? </p>
    
    <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p>
            </article>
        </div>
        <div class="clearfix"></div>
    <footer>
        &copy; 2012 Brewery...

CSS

body{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;
    background-color: #EBEBEB;
    color: #333;
    padding-top:50px;
}
#logo{
    margin-bottom:15px;
}
::selection {
    background-color: #BD4A39;
    color: white;
}

a{
    color:#BD4A39;
}
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
}
 
html[xmlns] .clearfix {
    display: block;
}
 
* html .clearfix {
    height: 1%;
}

/** UI Styles **/

#container{
    width:800px;
    margin:0 auto;
}

#container aside{
    width:150px;
    float:left;
    background-color:#333;
    background:#272727;
}
#container aside, #container aside nav{
    min-height: 300px;
}
#container aside li{
    text-align:right;
    border-top: 1px solid #323232;
    border-bottom: 1px solid #1B1B1B;
}
#container aside li a{
    display: block;
    min-height: 28px;
    line-height: 34px;
    position: relative;
    margin: 0;
    padding: 0 5px 0 10px;
    background: #272727;
    background-image: -moz-linear-gradient(top,#292929 0,#252525 100%);
    background-image: -ms-linear-gradient(top,#292929 0,#252525 100%);
    background-image: -o-linear-gradient(top,#292929 0,#252525 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#292929),color-stop(100%,#252525));
    background-image: -webkit-linear-gradient(top,#292929 0,#252525 100%);
    background-image: linear-gradient(to bottom,#292929 0,#252525 100%);
    color: #999;
    font-size: 11px;
    border-right: 4px solid transparent;
    cursor: pointer;
    -moz-transition:  all 0.2s ease-in-out;
    -ms-transition:  all 0.2s ease-in-out;
    -o-transition:  all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition:  all 0.2s ease-in-out;
    text-decoration:none;
    font-size: 14px;
    padding-right: 10px;
    text-shadow: 0 1px 2px #000;
}
#container...