JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="top" class="cf">
        <span class="left">Left Aligned</span>
        <span class="right">Right Aligned</span>
    </div>
    <div id="content" class="cf">
        <ul class="cf">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div id="bottom" class="cf">
        <span class="left">Left Aligned</span>
        <span class="right">Right Aligned</span>
    </div>
</div>

CSS

*{
    margin:0;
    padding:0;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

#container{
    width:600px;
}

.left{
    float:left;
}
.right{
    float:right;
}

#top{
    padding: 30px 50px;
}

#content{
    max-height: 300px;
    overflow: auto;
    padding: 0;
}

#bottom{
    padding: 30px 50px;
}

#content ul{
    list-style:none;
    margin:0;
    padding: 30px 50px;
}

#content ul li{
    width:30%;
    margin:0 5% 15px 0;
    height:150px;
    background:#000;
    float:left;
}

#content ul li:nth-child(3n) {
    margin-right: 0;
}