JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<body>
    <!-- start main body content -->
    <div class="wrapper">
        <header id="main">
            <div class="container cf">
                 <h1>LOGO</h1>

                <nav id="primary" class="cf">
                    <ul class="nav">
                        <li><a href="#">NAV ITEM 1</a>
                        </li>
                        <li><a href="#">NAV ITEM 2</a>
                        </li>
                        <li><a href="#">NAV ITEM 3</a>
                        </li>
                        <li><a href="#">NAV ITEM 4</a>
                        </li>
                        <li><a href="#">NAV ITEM 5</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
        <div class="body-wrapper cf">
            <aside id="list">
                <div class="container cf">
                    <ul>
                        <li> <a href="#" title="article text">
                                    <h2>Article Heading 1</h2>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                                </a>

                        </li>
                        <li> <a href="#" title="article text">
                                    <h2>Article Heading 1</h2>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                                </a>

                        </li>
                        <li> <a href="#" title="article text">
                                    <h2>Article Heading 1</h2>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                                </a>

                        </li>
                       ...

CSS

/*-------------------- reset stylesheet --------------------- */
 html, body, div, span, h1, h2, h3, p, a, ul, ol, li, img, article, aside, blockquote, figure, figcaption, footer, header, hgroup, menu, nav, section, time {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font-weight: normal;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, time {
    display: block;
}
a {
    outline: none;
}
/*-------------------- clearfix --------------------- */
 .cf:before, .cf:after {
    content:"";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
/*-------------------- global styles & structure --------------------- */
 html, body {
    height: 100%;
}
body {
    font-family: sans-serif;
}
a {
    text-decoration: none;
}
.wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}
.body-wrapper {
    margin-top: 80px;
    width: 100%;
    height: 100%;
}
/*-------------------- header, footer & navigation --------------------- */

/*--- header ---*/
 header#main {
    width: 100%;
    background-color: #333;
    position: fixed;
    top: 0;
    left: 0;
    height: 80px;
    z-index: 9999;
}
header#main h1 {
    color: #eee;
    float: left;
}
header#main .container {
    padding: 30px;
}
/*--- main navigation ---*/
 nav#primary {
    float: right;
}
nav#primary ul {
    list-style-type: none;
}
nav#primary ul.nav li {
    float: left;
    margin-right: 25px;
}
nav#primary ul.nav li:last-child {
    margin-right: 0;
}
nav#primary ul.nav li a {
    font-size: 14px;
    font-weight: bold;
    color: #eee;
}
/*--- aside - article list ---*/
 aside#list {
    float: left;
    width: 220px;
    height: 100%;
    background-color: #eee;
    overflow-y: auto;
}
aside#list .container {
    padding: 0 20px 20px 20px;
}
aside#list ul {
    list-style-type: none;
}
aside#list ul li {
    border-bottom: 1px solid #333;
}
aside#list ul li a...