JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="container">
        <header>
            <a href="#"><img src="https://raw.githubusercontent.com/l1nx/CorporateBlue/master/img/logo.png" alt="Whitesquare"></a>
            <form action="#" name="search" method="get">
                <input type="text" placeholder="Search">
                <button type="submit">GO</button>
            </form>
        </header>

        <nav>
            <li><a href="home.html">Home</a></li>
            <li class="active"><a href="about.html">About us</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Partners</a></li>
            <li><a href="#">Customers</a></li>
            <li><a href="projects.html">Projects</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Contact</a></li>
        </nav>

        <div class="title"><h1>About us</h1></div>

        <aside>
            <ul>
                <li><a href="#" class="active">Lorem ipsum</a></li>
                <li><a href="#">Donec tincidunt laoreet</a></li>
                <li><a href="#">Vestibulum elit</a></li>
                <li><a href="#">Etiam pharetra</a></li>
                <li><a href="#">Phasellus placerat</a></li>
                <li><a href="#">Cras et nisi vitae odio</a></li>
            </ul>
            <div class="offices">
                <h2>Our offices</h2>
                <div><img src="img/offices.png" height="180" width="228" alt=""></div>
            </div>
        </aside>
        
        <div class="content">
            <blockquote>
                <p>QUISQUE IN ENIM VELIT, AT DIGNISSIM EST. NULLA UL CORPER, DOLOR AC PELLENTESQUE PLACERAT, JUSTO TELLUS GRAVIDA ERAT, VEL PORTTITOR LIBERO ERAT.</p>
                <cite>John Doe, Lorem Ipsum</cite>
            </blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non neque ac sem accumsan rhoncus ut ut turpis. In hac habitasse platea dictumst. Proin eget nisi erat, et feugiat...

CSS

/*blue #29c5e6
light grey #f3f3f3
dark grey #e2e2e2
footer and font grey #7e7e7e
Oswald regular and light
*/

body {
    background: url('../img/bg.png');
    border-top: 5px solid #7e7e7e;
    color: #7e7e7e;
    font: 12px Arial, sans-serif !important;
}

.container {
    width: 960px;
    margin: 0 auto;
}

a {
    text-decoration: none;
}

header {
    padding-top: 20px;
}

form {
    float: right;
    padding:0 0 30px 0;
}

input {
    color: #b2b2b2;
    background-color: #f3f3f3;
    border: 1px solid #e7e7e7;
    height: 27px;
    width: 160px;
}

button {
    color: #fff;
    background-color: #29c5e6;
    border: none;
    height: 32px;
    width: 40px;
    font-family: "Oswald", sans-serif;
}

nav {
    clear: both;
    list-style: none;
}

nav li {
    background: #f3f3f3;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    display: inline-block;
    font: 14px "Oswald", sans-serif;
    padding: 10px 32px;
}

nav li:first-child {
    border-left: 1px solid #e7e7e7;
}

nav li.active {
    background: #29c5e6;
}

a[href="about.html"] {
    color: #fff;
}

nav a {
    color: #b2b2b2;
    text-transform: uppercase;
}

.title {
    background: transparent url(../img/lines.png);
    margin: 30px 0;
    padding-left: 20px;
}

h1 {
    background: url(../img/bg.png);
    color: #7e7e7e;
    display: inline-block;
    font: 40px/41px "Oswald",sans-serif;
    text-transform: uppercase;
    padding: 0 10px;
}

aside {
    float: left;
    width: 250px;
}

aside ul {
    border: 1px solid #e7e7e7;
    list-style: square inside;
}

aside li {
    border-bottom: 1px solid #e7e7e7;
    padding: 10px;
}

aside li:last-child{
    border: none;
}

aside a {
    color: #b2b2b2;
    font: 14px "Oswald", sans-serif;
    font-weight: 300;
    text-transform: uppercase;
}

aside a.active {
    color: #29c5e6;
}

.offices h2 {
    background: #29c5e6;
    color: #fff;
    font: 14px "Oswald", sans-serif;
    margin: 30px 0 0 0;
    padding: 10px;
   ...