JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<div class="dashboard">
    <div class="side panel">
        <div class="scroll">
            <div class="logo"><a href="#">CoachUp</a></div>
            <nav>
                <ul>
                    <li><a href="#" class="active">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>
        </div>
    </div>
    <div class="main panel">
        <div class="scroll">
            <header>
                <div class="align">
                    <div class="left">
                        <select>
                            <option>Switch Sports</option>
                            <option>Basketball</option>
                            <option>Baseball</option>
                        </select>
                    </div>
                    <div class="right">
                        <button>Sign Out</button>
                    </div>
                </div>
            </header>
            <article>
                <div class="notice">X</div>
                asdf
            </article>
            <footer>
                
            </footer>
        </div>
    </div>
</div>

SCSS

html, body, .dashboard {
    position: absolute;
    display: block;
    top: 0; bottom: 0; height: 100%;
    left: 0; right: 0;  width: 100%;
    overflow: hidden;
}
.dashboard {
    display: table;
}
.panel {
    display: table-cell;
    vertical-align: top;
    min-height: 100%;
}
.panel .scroll {
    display: block;
    height: 100%;
    overflow: hidden;
    overflow-y: scroll;
}
.side.panel {
    width: 200px;
}

/**********************/

html { font-size: 87.5% }
body {
    font-size:  1em;
    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;
}

.dashboard,
.scroll,
.panel {
    background: inherit;
}

.side.panel a {
    display: block;
    color: white;
    text-decoration: none;
}

.side.panel a:hover {
    background: rgba(255,255,255,.05);
}

.side.panel a:active {
    background: rgba(255,255,255,.15);
}

.side.panel .logo a {
    padding: .5em .75em;
    
    font-size: 2em;
    line-height: 1em;
    font-weight: bold;
}
.side.panel nav {
    font-size: 1.5em;
    line-height: 1em;
}
.side.panel nav ul li a {
    padding: .33333333333em 1em;
}
.side.panel nav ul li a.active {
    background: #1fb8eb;
}

.main.panel {
    background: inherit;
}

.main.panel header,
.main.panel footer {
    position: relative;
    z-index: 10;
    background: inherit;
}

.main.panel header button,
.main.panel header select {
    -webkit-appearance: none;
    height: auto;
    padding: .5em 1em;
    margin: .5em 0;
   ...

JavaScript

function setHeight() {
    $('.panel').height( $(window).height() );
}

$(window)
    .load(setHeight)
    .resize(setHeight);