JSFiddle - React, Tailwind, and code Playground

by A Lee

HTML

<link href='http://fonts.googleapis.com/css?family=Radley:400italic,400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Overlock+SC' rel='stylesheet' type='text/css'>
    
<div class="top-nav-wrapper cf">
    <ul class="horizontal-nav cf"> 
        <li><a href="#"><span>Home</span></a></li>
        <li><a href="#"><span>Bio</span></a></li>
        <li><a href="#"><span>Projects</span></a></li>
        <li><a href="#"><span>Contact</span></a></li>
    </ul>
</div>
    
<div class="global-wrapper">
    <div class="global-inner cf">
 
    <div class="content-wrapper">
        <div class="content-box">
            <p><a href="#">bleek 'n coy</a></p>
        </div>
        <div class="content-box">
            <p><a href="#">marketing</a></p>
        </div>
        <div class="content-box">
            <p><a href="#">creative pr</a></p>
        </div>
        <div class="content-box">
            <p><a href="#">schedule</a></p>
        </div>
        <div class="content-box">
            <p><a href="#">bleek 'n coy</a></p>
        </div>
        <div class="content-box">
            <p><a href="#">marketing</a></p>
        </div>
        <div class="content-box">
            <p><a href="#">creative pr</a></p>
        </div>
        <div class="content-box">
            <p><a href="#">schedule</a></p>
        </div>
        <div class="content-box">
            <p><a href="#">bleek 'n coy</a></p>
        </div>
        <div class="content-box">
            <p><a href="#">marketing</a></p>
        </div>
        <div class="content-box">
            <p><a href="#">creative pr</a></p>
        </div>
        <div class="content-box">
            <p><a href="#">schedule</a></p>
        </div>
        <div class="content-box">
            <p><a href="#">bleek 'n coy</a></p>
        </div>
        <div class="content-box">
            <p><a href="#">marketing</a></p>
        </div>
        <div class="content-box">
            <p><a...

CSS

body,html {margin: 0; padding: 0;}
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.horizontal-nav {
    margin: 0;
    padding: 0;
}
.horizontal-nav li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}

.horizontal-nav li a {
    text-decoration: none;
}

.horizontal-nav li a span {
    display: block;
    padding: 5px 10px;
    color: white;
}

.top-nav-wrapper {
    border-top: 2px #000 solid;
}

.top-nav-wrapper .horizontal-nav {
    background: #000;
    float: right;
    margin-right: 20px;
    text-transform: uppercase;
}
.top-nav-wrapper .horizontal-nav li {
    margin-left: 5px;
}
.top-nav-wrapper .horizontal-nav li:first-child {
    margin-left: 0px;
}
.top-nav-wrapper .horizontal-nav li a {}
.top-nav-wrapper .horizontal-nav li a span {}

.global-wrapper {}
.global-wrapper .global-inner {
    width: 720px;
    margin: 0 auto; /* center like a boss */
}

.highlights-wrapper {
    width: 220px;
    float: left;
    
}
.highlights-wrapper img {
    max-width: 100%;
}

.content-wrapper {
   float: right;
    width: /* 720 - 220 (- 20px for a gutter ) */ 480px;
   
}
.content-wrapper .content-box {}
.content-wrapper .content-box {
     margin-left: 200px;
    background: red;
}

footer {
    border-top: 1px #efefef solid;
    margin: 40px 0 0;
    padding: 20px;
    clear: both;
}