JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<link rel="stylesheet" href="http://cdn.thejameskyle.com/normalize.css">
<header>
    <h1>CoachUp</h1>
</header>

<article>
    <section class="billboard">
        <div class="container">
            <div class="row">
                <div class="half">
                    sdsdfgsdfgsdfgsdfgsdfgsdfgds
                </div>
                <div class="half">hi</div>
            </div>
        </div>
    </section>
    d
</article>

SCSS

/** COLORS */
    $dark: #252525;
    $white: #FEFEFE;

/** FONTS */
    $font-size: 15px;
    $line-height: 21px;
    $font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    $font-weight: 300;

@mixin font {
    font-family: $font-family;
    font-weight: $font-weight;
    font-size: 1em;
    line-height: $line-height/$font-size*1em;
}


html {font-size: $font-size/16px*100%}

* {
    outline: 1px solid rgba(55,55,55,0.1);
    outline-offset: -1px;
}

body {
    @include font;
    margin: 7em 1em 1em;
}

header {
    position: fixed;
    top: 0; left: 0; right: 0;
    
    padding: 1em;
    
    background: #252627;
    color: #f1f2f3;
    
    vertical-align: middle;
    
    * {
        display: inline-block;
        margin: 0;
        padding: 0;
        line-height: 1em;
    }
    
    h1 {
        margin: -0.5em 1em -0.5em 0;
        padding: 0.5em 0;
        line-height: 1em;
        vertical-align: middle;
    }
}
header::before {
    content: "";
    display: block;
    height: 2em;
    margin: -1em -1em 1em;
    
    background: #2d2e2f;
}


section.billboard {
    padding: 1em 0;
    margin: 0 -1em;
    
    background: #1ab7ea;
    color: #fff;
}

.container {
    display: table;
    width: 100%;
    border-spacing: 1em 0;
    
    .row {
        position: relative;
        display: table-row;
        width: auto;
    
        .half {
            display: table-cell;
            background: green;
            width: 50%;
        }
    }
}