JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class="wrapper">
    <div class="box">
        <div class="row row-offcanvas row-offcanvas-left">


            <!-- sidebar -->
            <div class="column col-sm-2 col-xs-1 sidebar-offcanvas" id="sidebar">

                <ul class="nav">
                    <li><a href="#" data-toggle="offcanvas" class="visible-xs text-center"><i class="glyphicon glyphicon-chevron-right"></i></a>
                    </li>
                </ul>

                <ul class="nav hidden-xs" id="lg-menu">
                    <li class="active"><a href="#featured"><i class="glyphicon glyphicon-list-alt"></i> Featured</a>
                    </li>
                    <li><a href="#stories"><i class="glyphicon glyphicon-list"></i> Stories</a>
                    </li>
                    <li><a href="#"><i class="glyphicon glyphicon-paperclip"></i> Saved</a>
                    </li>
                    <li><a href="#"><i class="glyphicon glyphicon-refresh"></i> Refresh</a>
                    </li>
                </ul>
                <ul class="list-unstyled hidden-xs" id="sidebar-footer">
                    <li>
                        <a href="http://www.bootply.com">
                            <h3>Bootstrap</h3>
                            <i class="glyphicon glyphicon-heart-empty"></i> Bootply
                        </a>
                    </li>
                </ul>

                <!-- tiny only nav-->
                <ul class="nav visible-xs" id="xs-menu">
                    <li><a href="#featured" class="text-center"><i class="glyphicon glyphicon-list-alt"></i></a>
                    </li>
                    <li><a href="#stories" class="text-center"><i class="glyphicon glyphicon-list"></i></a>
                    </li>
                    <li><a href="#" class="text-center"><i class="glyphicon glyphicon-paperclip"></i></a>
                    </li>
         ...

CSS

/* custom template */
 html, body {
    height: 100%;
    font-family:verdana, arial, sans-serif;
    color:#555555;
}
.nav {
    font-family: Arial, sans-serif;
    font-size:13px;
}
a {
    color:#222222;
}
a:hover {
    text-decoration:none;
}
hr {
    border-color:#dedede;
}
.wrapper, .row {
    height: 100%;
    margin-left:0;
    margin-right:0;
}
.wrapper:before, .wrapper:after, .column:before, .column:after {
    content:"";
    display: table;
}
.wrapper:after, .column:after {
    clear: both;
}
.column {
    height: 100%;
    overflow: auto;
    *zoom:1;
}
.column .padding {
    padding: 20px;
}
.full {
    padding-top:70px;
}
.box {
    bottom: 0;
    /* increase for footer use */
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color:#444444;
    /*
    background-image:url('/assets/example/bg_suburb.jpg');
    background-size:cover;
    background-attachment:fixed;
  */
}
.divider {
    margin-top:32px;
}
.navbar-blue {
    border-width:0;
    background-color:#3B5999;
    color:#ffffff;
    font-family:arial, sans-serif;
    top:0;
    position:fixed;
    width:inherit;
}
.navbar-blue li > a, .navbar-toggle {
    color:#efefef;
}
.navbar-blue .dropdown-menu li a {
    color:#2A4888;
}
.navbar-blue .dropdown-menu li > a {
    padding-left:30px;
}
.navbar-blue li>a:hover, .navbar-blue li>a:focus, .navbar-blue .open, .navbar-blue .open>a, .navbar-blue .open>a:hover, .navbar-blue .open>a:focus {
    background-color:#2A4888;
    color:#fff;
}
#main {
    background-color:#e9eaed;
    padding-left:0;
    padding-right:0;
}
#main .img-circle {
    margin-top:18px;
    height:70px;
    width:70px;
}
#sidebar {
    padding:0px;
    padding-top:15px;
}
#sidebar, #sidebar a, #sidebar-footer a {
    color:#ffffff;
    background-color:transparent;
    text-shadow:0 0 2px #000000;
    padding-left:5px;
}
#sidebar .nav li>a:hover {
    background-color:#393939;
}
.logo {
    display:block;
    padding:3px;
    background-color:#fff;
...

JavaScript

/* off-canvas sidebar toggle */

$('[data-toggle=offcanvas]').click(function () {
    $(this).toggleClass('visible-xs text-center');
    $(this).find('i').toggleClass('glyphicon-chevron-right glyphicon-chevron-left');
    $('.row-offcanvas').toggleClass('active');
    $('#lg-menu').toggleClass('hidden-xs').toggleClass('visible-xs');
    $('#xs-menu').toggleClass('visible-xs').toggleClass('hidden-xs');
    $('#btnShow').toggle();
});