JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<div class="master">
<!--[if lt IE 7]>
    <p class="chromeframe">Your browser is <strong>ancient!</strong> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="//www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
<![endif]-->

<section class="side panel">
    <div class="logo">CoachUp</div>
    <nav>
        <ul>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Photos</a></li>
            <li><a href="#">Availability</a></li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Sessions</a></li>
            <li><a href="#">Income</a></li>
            <li><a href="#">Billing</a></li>
            <li><a href="#">Account</a></li>
            <li><a href="#">Referrals</a></li>
        </ul>
    </nav>
</section>
<section class="main panel">
    <header>
        <div class="left">
            <select>
                <option>Switch Sports</option>
                <option>Basketball</option>
                <option>Baseball</option>
            </select>
        </div>
        <div class="right">
            <button>Sign Out</button>
        </div>
    </header>
    <article>
    
        <% render !!!!!!! %>

        <p>Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.</p>

        <p>Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

        <p>Integer posuere erat a ante venenatis dapibus posuere...

SCSS

html, body, .master {
    position: relative;
    display: block;
    top: 0; bottom: 0; height: 100%;
    left: 0; right: 0;  width: 100%;
    margin: 0; padding: 0;
    overflow: hidden;

}

html {
    position: absolute;
}

body.dashboard {
    font-size:  .875em;
    line-height: 1.5em;
    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;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: subpixel-antialiased;
       -moz-font-smoothing: subpixel-antialiased;
        -ms-font-smoothing: subpixel-antialiased;
         -o-font-smoothing: subpixel-antialiased;
            font-smoothing: subpixel-antialiased;
    background: #262626;
    color: #fff;
}
.master {
    display: table;
}
section.panel {
    display: table-cell;
    z-index: -5;
    width: auto;
    height: auto;
    
    &.side {
        width: 200px;
        .logo {
            padding: .5em;
            font-size: 2em;
            line-height: 1.25em;
        }
        nav > ul {
            list-style-type: none;
            font-size: 1.5em;
            line-height: 1em;
            > li {
                padding: .33333333333em .66666666666em;
                padding-right: 1000px;
                margin-right: -1000px;

                &.active {
                    background: #1fb8eb;
                }
            }
        }
    }
    &.main {
        z-index: 5;
        header, footer {
            z-index: 10;
            display: table;
            width: 100%;
            background: #262626;

            > .left,
            > .right,
            > .center {
                display: table-cell;
                > * {
                    display: inline;
                }
            }
            > .left {
                text-align: left;
            }
            >...