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="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>

SCSS

html { font-size: 87.5% }
body {
    padding: 0;
    margin: 0;
    
    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;
    -webkit-font-smoothing: subpixel-antialiased;
    
    opacity: .9999999;
    
    .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 & {
        font-family: "proxima-nova";
    }
}

.logo {
    color: transparent;
    background: no-repeat url(http://cdn.thejameskyle.com/coachup-logo.png);
        
    font-family: inherit;
    font-weight: 400;
    letter-spacing: -.055em;
    text-transform: lowercase;
    text-decoration: none;
    
    strong {
        margin-left: -.03em;
        font-weight: 900;
        letter-spacing: -.074em;
    }
    
    .fontface & {
        font-family: "Maven-Pro-Regular", "MavenPro-Regular", "Maven Pro Regular", "MavenPro Regular", "Maven Pro";
        background: transparent;
        color: inherit;
    }
}

div.sidebar {
    position: relative;
    top: 0; bottom: 0; min-height: 100%;
    left: 0; right: 0; min-width: 19.5em;
    margin: 0; padding: 0 1.5em; overflow: hidden;
    background: #262626;
    color: #fff;
    
    h1 {
        font-size: 3em;
        line-height: 1.5em;
        margin: 0; padding: 0 0 .1666666em;
    }
    
    nav {
        h4 {
            font-size: 1em;
            line-height: 2em;
            margin: 0 -9999px;
            padding: 0 9999px;
            text-transform: uppercase;
    
            background: rgba(255, 255, 255, .2)
        }
        ul {
            list-style-type: none;
            margin: 0; padding: 0 0 1em;
        
  ...

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"
    });
});