JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/snap.js/1.9.2/snap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.7/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.7/angular-route.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <header class="clearfix" style="position: fixed;
left:0px; right:0px; z-index:5000;" role="navigation">
      <div style="float: left; background-color:black; color:white;">
        <a href="/">Hello</a>
      </div>
    </header>
    
    <main>
      <aside>
        <snap-drawer style="background-color:red; width:240px;">
          I'm the navigation!
        </snap-drawer>
      </aside>
    
      <snap-content id="page-content" snap-id="pageContent">
        Main content here
        <button snap-toggle="">Toggle</button>
      </snap-content>
    </main>
  </div>
</div>

CSS

snap-content,[snap\:content],[snap-content],[data-snap-content],[x-snap-content],.snap-content,.x-snap-content,snap-drawers,[snap\:drawers],[snap-drawers],[data-snap-drawers],[x-snap-drawers],.snap-drawers,.x-snap-drawers{position:absolute;height:auto;top:0;bottom:0;width:auto;left:0;right:0}snap-drawer,[snap\:drawer],[snap-drawer],[data-snap-drawer],[x-snap-drawer],.snap-drawer,.x-snap-drawer{position:absolute;height:auto;top:0;bottom:0;overflow:auto;-webkit-transition:top .2s linear;-moz-transition:top .2s linear;-o-transition:top .2s linear;transition:top .2s linear;-webkit-transition:bottom .2s linear;-moz-transition:bottom .2s linear;-o-transition:bottom .2s linear;transition:bottom .2s linear;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;overflow-scrolling:touch;width:256px}

JavaScript

angular.module('myApp', ['snap'])
    .controller('MyCtrl', function ($scope, $location, $rootScope)   {
    })
;

// The following code is angular-snap
angular.module("snap",[]),function(){"use strict";var a=[1,4,0],b={full:a.join("."),major:a[0],minor:a[1],patch:a[2]};angular.module("snap").constant("SNAP_VERSION",b)}(),angular.module("snap").directive("snapClose",["$rootScope","snapRemote",function(a,b){"use strict";return{restrict:"A",link:function(c,d,e){d.bind("click",function(){b.close(c.$eval(e.snapId)),a.$digest()})}}}]),angular.module("snap").directive("snapContent",["snapRemote",function(a){"use strict";return{restrict:"AE",link:function(b,c,d){c.addClass("snap-content");var e={element:c[0]};angular.extend(e,a.globalOptions);var f=d.snapId;f&&(f=b.$eval(d.snapId)),angular.isDefined(d.snapOptions)&&d.snapOptions&&angular.extend(e,b.$eval(d.snapOptions)),a.register(new window.Snap(e),f),angular.isDefined(d.snapOptions)&&d.snapOptions&&b.$watch(d.snapOptions,function(b){a.getSnapper(f).then(function(a){a.settings(b)})},!0),b.$on("$destroy",function(){a.unregister(f)})}}}]),angular.module("snap").directive("snapDragger",["snapRemote",function(a){"use strict";return{restrict:"AE",link:function(b,c,d){var e=b.$eval(d.snapId);a.getSnapper(e).then(function(a){a.settings({dragger:c[0]})})}}}]),angular.module("snap").directive("snapDrawer",function(){"use strict";return{restrict:"AE",link:function(a,b,c){b.addClass("snap-drawer");var d=b.parent(),e=!0;for("right"===c.snapDrawer?b.addClass("snap-drawer-right"):b.addClass("snap-drawer-left");d.length;)d.hasClass("snap-drawers")&&(e=!1),d=d.parent();e&&b.wrap('<div class="snap-drawers" />')}}}),angular.module("snap").directive("snapDrawers",function(){"use strict";return{restrict:"AE",link:function(a,b){b.addClass("snap-drawers")}}}),angular.module("snap").directive("snapToggle",["$rootScope","snapRemote",function(a,b){"use strict";return{restrict:"A",link:function(c,d,e){var...