JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<header>
    <nav>
        <h1>CoachUp</h1>
        
        <ul>
            <li><a>About</a></li>
            <li><a>Browse Coaches</a></li>
            <li><a>TV</a></li>
            <li><a>Blog</a></li>
        </ul>
        
        <div class="pull-right">
            <form>
                <input type="text" placeholder="Email" />
                <input type="text" placeholder="Password" />
                <button>Login</button>
            </form>
        </div>
    </nav>
</header>
<article>
    
</article>
<footer>
    
</footer>

SCSS

html {font-size: 87.5%}

body {
    min-width: 20em;
    max-width: 40em;
    margin: 0 auto;
    padding: 28px;
    font-family: "Proxima-Nova-Regular", "ProximaNova-Regular", "Proxima Nova Regular", "ProximaNova Regular", "Proxima Nova", "Proxima Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 14px;
    line-height: 21px;
    font-weight: 300;
    color: #010101;
    color: rgba(0,0,0,.99);
    text-shadow: 0 1px 1px 1px rgba(255,255,255,.1);
    
    background-color: #FEFEFE;
    background-color: rgba(254,254,254);
    
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: subpixel-antialiased;
}

p {
    margin: 21px 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 21px 0;
    font-size: 14px;
    line-height: 21px;
    color: rgba(0,0,0,.8);
}

h1 {
    margin-top:   14px;
    font-size:    28px;
    line-height:  35px;
    margin-bottom: 7px;
}

h2 {
    margin-top:    7px;
    font-size:    21px;
    line-height:  28px;
    margin-bottom: 7px;
}

h1 + h2 {
    margin-top: -7px;
    
}

h3 {
    margin-top:    21px;
    font-size:     15px;
    line-height:   21px;
    margin-bottom: 14px;
}

h4 {
    margin-top:    14px;
    font-size:     17px;
    line-height:   21px;
    margin-bottom: 7px;
}

h5 {
    margin-top:    7px;
    font-size:     14px;
    line-height:   21px;
    margin-bottom: 7px;
}

a {
    color: #db048d;
    text-decoration: none;
    border-bottom: 1px solid #fad4ec;
    cursor: pointer;
}
a:hover  { border-bottom-color: #db048d }
a:active { color: #ba0477 }
a:focus,
a:focus:hover {
    background: #db048d;
    color: #FFF;
    outline: 2px solid #db048d;
    border-bottom-color: #fad4ec;
}

* > *:first-child {
    margin-top: 0;
}
* > *:last-child {
    margin-bottom: 0;
}

span.textlines {
    display: inline;
    
    background: rgba(0,0,0,.65);
    color: transparent;
    text-shadow: none;
    box-shadow:
        inset 0 1px 4px...