JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<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 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>Account</a></li>
    </ul>
</nav>
</div>

SCSS

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;
}
.sidebar {
    background: #262626;
    color: d9d9d9;
    color: #ffffffd9;
    color: rgba(255, 255, 255, .85);
    opacity: .999999;
    
    h1.logo {
        font: 400 3em "Maven Pro";
        line-height: 1.5em;
        letter-spacing: -.055em;
        font-size-adjust: .5;
        text-transform: lowercase;
        text-decoration: none;
        color: #fff;
        padding: 0 .475em .1666666em;
        strong {
            margin-left: -.03em;
            font-weight: 900;
            letter-spacing: -.074em;
        }
    }
    a {
        display: block;
        text-decoration: none;
        &:hover {
            background: #313131;
            background: #fffffff2;
            background: rgba(255, 255, 255, .05);
        }
    }
    
    nav {
        position: relative;
        top: 0; bottom: 0;
        min-height: 100%;
        width: 100%;
        h4 {
            font-weight: bold;
            text-transform: uppercase;
            line-height: 1.5em;
            padding: .2em 1.5em 0;
            background: rgba(255, 255, 255, .1);
            color: #fff;
        }
        ul {
            font-size: 1.5em;
            line-height: 1.6666666667em;
            padding-bottom: 1em;
            li {
                width: 100%;
                a {
                    position: relative;
                    z-index: 2;
                    display: block;
                    width: auto;
                    padding: 0 1em;
        
                    color: #fff;
                    text-decoration: none;
        
            ...

JavaScript

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


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'] }
};

async('ajax.googleapis.com/ajax/libs/webfont/1/webfont.js');