JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<link rel="stylesheet" href="http://cdn.thejameskyle.com/bootstrap.css">
<link rel="stylesheet" href="http://cdn.thejameskyle.com/bootstrap-responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<div class="master">
    <div class="full-width full-height">
        <div class="part one-fourth dark kill-scrollbar">
            <div class="scroll">
                <div class="scroll-inner padded sidebar">
                    <a href="#"><h1 class="logo">Coach<strong>Up</strong></h1></a>
                    <nav>
                        <h4>Coach</h4>
                        <ul>
                            <li><a href="#" class="selected">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="#">Account</a></li>
                        </ul>
                        <h4>Athlete</h4>
                        <ul>
                            <li><a>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>Account</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <div class="part one-fourth light kill-scrollbar">
            <div class="scroll">
                <div class="scroll-inner padded">
                    
                </div>
            </div>
        </div>
        <div class="part rest white">
            <div...

CSS

html {
  font-size: 87.5%;
}
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-size: 1em;
  line-height: 1.5em;
  font-family: "Proxima-Nova-Regular", "ProximaNova-Regular", "Proxima Nova Regular", "ProximaNova Regular", "Proxima Nova", "proxima-nova", "Proxima Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  text-rendering: optimizeLegibility;
  font-smoothing: subpixel-antialiased;
  opacity: 0.999999;
}
.font-face.wf-proximanova-i7-active.wf-proximanova-i4-active.wf-proximanova-n4-active.wf-proximanova-n7-active.wf-proximanova-n1-active.wf-proximanova-n3-active.wf-proximanova-n9-active body {
  font-family: "proxima-nova";
}
.master {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  left: 0;
  right: 0;
  width: 100%;
  overflow: auto;
}
.full-width {
  position: relative;
  display: table;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}
.full-width .part {
  display: table-cell;
  vertical-align: top;
}
.full-width .part,
.full-width .part.rest {
  width: auto;
}
.full-width .part.one-tenth {
  width: 10%;
}
.full-width .part.one-ninth {
  width: 11.111111111%;
}
.full-width .part.one-eighth {
  width: 12.5%;
}
.full-width .part.one-seventh {
  width: 14.285714286%;
}
.full-width .part.one-sixth {
  width: 16.666666666%;
}
.full-width .part.one-fifth,
.full-width .part.four-eighths,
.full-width .part.two-tenths {
  width: 20%;
}
.full-width .part.two-ninths {
  width: 22.222222222%;
}
.full-width .part.one-quarter,
.full-width .part.one-fourth,
.full-width .part.two-eighths {
  width: 25%;
}
.full-width .part.two-sevenths {
  width: 28.571428572%;
}
.full-width .part.three-tenths {
  width: 30%;
}
.full-width .part.one-third,
.full-width .part.two-sixths,
.full-width .part.three-ninths {
  width: 33.333333333%;
}
.full-width .part.three-eighths {
  width: 37.5%;
}
.full-width .part.four-tenths {
  width: 40%;
}
.full-width .part.three-sevenths...

JavaScript

function async(src) {
  var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
  o.src = '//' + src;
  s.parentNode.insertBefore(o, s);
}

WebFontConfig = {
     google: { families: ['Maven Pro:400,900'] },
    typekit: { id: 'aqc6qet' }
};

async('ajax.googleapis.com/ajax/libs/webfont/1/webfont.js');
async('cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js');

$(function() {
    $("nav ul").sortable({
        containment: "parent",
        scrollSensitivity: 40,
        scrollSpeed: 5,
        tolerance: "pointer"
    });
});