JSFiddle - React, Tailwind, and code Playground

by Kotick1987

HTML

<!doctype html>
<html>
    
    <head>
        <meta crarset="utf-8">
        <title>Black + White</title>
        <link rel="stylesheet" href="css/960_24_col.css">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/text.css">
    </head>
    
    <body>
        <div class="container_24">
            <header>
                	<h1>Black + White</h1>

                <nav>
                    <ul>
                        <li><a href="#" class="selected">Home</a>
                        </li>
                        <li><a href="#">Our Services</a>
                        </li>
                        <li><a href="#">How We Work</a>
                        </li>
                        <li><a href="#">Testimonials</a>
                        </li>
                        <li><a href="#">Work Examples</a>
                        </li>
                    </ul>
                </nav>
                <div class="banner grid_18">
                    <p>Some slick phrase would go in here to sum up what the business actually does and stands for</p>
                </div>
                <div class="grid_6 callout"></div>
            </header>
            <div class="main">
                <div class="grid_9">
                    	<h2> services we offer </h2>

                    <p>The survey, open through 5 May 2013, should take approximately 15 minutes to complete. Participants who complete the survey may enter to win an Apple iPad mini.</p>
                    <p>W3C has retained Salloway and Associates, an independent market strategy and research company, to conduct this survey on a confidential and professional basis. W3C will receive only anonymized data. Please see the survey for the complete privacy policy.</p>
                    <p><a href="#" class="button">Read More</a>
                    </p>
                </div>
                <div class="grid_9">
            ...

CSS

/*
**********************
* =grid overrides
**********************
*/
 .grid_3 {
    margin-left: 60;
}
/*
**********************
* =miscellaneous
**********************
*/
 .container_24 {
    margin-top: 10px;
}
p {
    font-size: 13px;
    line-height: 20px;
    color: #353535;
}
h1, h2 {
    letter-spacing: -1px;
}
h2 {
    font-size: 26px;
    text-transform: lowercase;
    border-bottom: 1px solid #d1d1d1;
    padding-bottom: 30px;
}
a {
    color: #7e7e7e;
    text-decoration: none;
}
a:hover, .selected {
    color: black;
}
.button {
    background: #242324;
    padding: 6px;
}
.button:hover {
    color: white;
}
li {
    margin-left: 24px;
}
/*
**********************
* =header
**********************
*/
 header {
    overflow: hidden;
}
header h1 {
    background: url(../img/logo.png);
    text-indent: -9999px;
    width: 174px;
    height: 23px;
    margin: 10px 10px 22px;
    float: left;
}
/*
**********************
* =nav
**********************
*/
 nav {
    float: right;
    padding-top: 12px;
}
nav li {
    display: inline;
}
nav a {
    text-transform: lowercase;
}
/*
**********************
* =banner
**********************
*/
 .banner {
    background: url(../img/city-bg.jpg) no-repeat;
    width: 695px;
    height: 231px;
    clear: both;
}
.callout {
    background: black;
    height: 231px;
    margin-left: 60px;
}
.grid_4 {
    background: red;
}
.container_12 {
    background: green;
}
.grid_3 {
    background: orange;
}
/*
**********************
* =main
**********************
*/
 .main {
    margin-top: 20px;
}
/*
**********************
* =footer
**********************
*/
 footer {
    clear: both;
}