JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css.map"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/fonts/FontAwesome.otf"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/fonts/fontawesome-webfont.eot"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/fonts/fontawesome-webfont.svg"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/fonts/fontawesome-webfont.ttf"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/fonts/fontawesome-webfont.woff"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/fonts/fontawesome-webfont.woff2"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.js"></script>
<div class="container-fluid">

    <div class="row" id="head-container"> <!--head-container-->
        <div class="col-xs-12" id="app-top-nav"> <!--app-top-nav-->
            <div id="app-top-nav-left">
                <div id="app-top-menu-trigger-xs" data-toggle="offcanvas">
                    <a class="navicon-button larr">
                        <div class="navicon"></div>
                    </a>
                </div>
            </div>
            <div id="app-top-nav-middle"...

CSS

@charset "UTF-8";
/*------------------------------------*\
    #Mixins
\*------------------------------------*/
.transition-transform-mixin {
  -webkit-transition: -webkit-transform 0.3s ease-out;
  /* Chrome, Safari, Opera */
  -moz-transition: -moz-transform 0.3s ease-out;
  /* Mozilla */
  -o-transition: -o-transform 0.3s ease-out;
  /* Opera */
  transition: transform 0.3s ease-out;
}
/*------------------------------------*\
    #Placehoder
\*------------------------------------*/
/*------------------------------------*\
    #Font Awesome
\*------------------------------------*/
.fa-1x {
  font-size: 1rem;
  width: 10px;
}
.fa-2x {
  font-size: 2rem;
  width: 20px;
}
.fa-3x {
  font-size: 3rem;
  width: 30px;
}
/*------------------------------------*\
    #jQuery mobile customization
\*------------------------------------*/
.ui-page-theme-a a,
html .ui-bar-a a,
html .ui-body-a a,
html body .ui-group-theme-a a {
  font-weight: normal;
}
.ui-overlay-a,
.ui-page-theme-a,
.ui-page-theme-a .ui-panel-wrapper {
  text-shadow: none;
}
/*------------------------------------*\
    #Mobile base customization
\*------------------------------------*/
html,
body {
  overflow-x: hidden;
  /* Prevent scroll on narrow devices */
}
/*------------------------------------*\
    #App navigation offcanvas
\*------------------------------------*/
.offcanvas {
  position: relative;
}
.offcanvas-left {
  /* 50px for fixed top header */
  /* 0px hides offcanvas */
  -webkit-transform: translate3d(0px, 50px, 0);
  /* Chrome, Safari, Opera */
  -moz-transform: translate3d(0px, 50px, 0);
  /* Mozilla */
  -ms-transform: translate3d(0px, 50px, 0);
  /* IE 9 */
  -o-transform: translate3d(0px, 50px, 0);
  /* Opera */
  transform: translate3d(0px, 50px, 0);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  /* Chrome, Safari, Opera */
  -moz-transition: -moz-transform 0.3s ease-out;
  /* Mozilla */
  -o-transition: -o-transform 0.3s ease-out;
  /* Opera */
  transition: transform 0.3s...

JavaScript

$(document).ready(function () {
    $('[data-toggle="offcanvas"]').click(function () {
        $('.offcanvas').toggleClass('active');
        $('.main').toggleClass('active');
        $('.sidebar-offcanvas').toggleClass('active');
        $('.navicon-button.larr').toggleClass('open');
    });

    $('.primary-nav-points').click(function () {
        $('ol', this).toggleClass('activate-sub-menu');
    })

});