JSFiddle - React, Tailwind, and code Playground

by SchmalzyB

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<aside id="ctrlNavPanel">

    <ul class="nav-link-list">
        <li><label>Menu</label></li>
        <li><a href="/"><span class="fa fa-lg fa-home"></span> Home</a></li>
        <li><a><span class="fa fa-lg fa-group"></span>About Us</a></li>
        <li><a><span class="fa fa-lg fa-book"></span> Contacts</a></li>
    </ul>

</aside>



    <div id="fullContainer">
    <div id="content-wrap">

        <header id="ctrlTitleBar">
                    <a id="btnNavToggle" class="pull-left fa fa-bars fa-2x"></a>
    <h1 class="title text-italic">heading</h1>
        </header>

        <main>
            <div id="viewPassage">


    <h1>Title</h1>

    <div id="content">

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed metus est, malesuada non neque ac, ornare dignissim dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus leo ligula, hendrerit in porta sed, gravida at nibh. Aliquam imperdiet porta velit in commodo. Ut pellentesque ullamcorper blandit. Donec a facilisis magna. Nulla semper diam eu ligula adipiscing pulvinar. Praesent nec lectus facilisis, mattis neque quis, feugiat elit. Donec ornare rutrum magna sed rutrum. Morbi rhoncus erat ante, nec sagittis sem ullamcorper eget. Nunc convallis orci fringilla, sagittis mauris a, feugiat nunc.  Nunc tempor in enim eget interdum. Cras mattis nibh id nunc pretium iaculis. Ut non augue id odio feugiat venenatis. Aenean laoreet facilisis mauris eget tempus. Quisque non erat in metus faucibus accumsan quis ac justo. Pellentesque posuere tellus ut sodales bibendum. Maecenas faucibus ligula eget accumsan imperdiet. Proin a elit augue. Donec malesuada ultrices suscipit....

CSS

body {
  background: #ffffff;
  
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
  position: static !important;
}
body div#fullContainer {
  height: 100%;
  overflow: hidden;
  position: absolute;
  width: 100%;
}
body div#fullContainer #content-wrap {
  background: #ffffff;
  
  bottom: 0;
  box-shadow: -5px 0px 8px #000000;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1002;
}
body div#fullContainer #content-wrap main {
  margin: 10px;
    overflow: auto;
}
.text-italic {
  font-style: italic !important;
}
h1 {
  font-family: Verdana, Geneva, sans-serif;
}
ul.nav-link-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
ul.nav-link-list li {
  background: #555555;
  color: #ffffff;
  border-bottom: 1px solid #777777;
}
ul.nav-link-list li label {
  background: #999999;
  font-size: 2rem;
  font-weight: normal;
  letter-spacing: 1px;
  margin-bottom: 0px;
  padding: 5px;
  text-align: center;
  width: 100%;
}
ul.nav-link-list li a {
  color: #FFFFFF;
  display: block;
  padding: 0.8rem;
}
ul.nav-link-list li a span {
  margin-right: 8px;
}
#ctrlTitleBar {
  background: #000000;
  color: #FFFFFF;
  padding: 10px 0;
  text-align: center;
}
#ctrlTitleBar h1 {
  font-size: 3rem;
  margin: 0 0 0 34px;
}
#ctrlTitleBar a {
  color: #ffffff;
  cursor: pointer;
  display: block;
  margin: 3px 0 0 10px;
}
#ctrlTitleBar a:hover {
  text-decoration: none;
}
#ctrlNavPanel {
  background: #333333;
  bottom: 0;
  box-sizing: content-box;
  height: 100%;
  overflow-y: auto;
  position: absolute;
  top: 0;
  width: 250px;
  z-index: 1001;
}

JavaScript

/*--Toggle Slide Menu--*/
$('#btnNavToggle').click(function() {

            if ( $('#content-wrap').hasClass('navOpen') ){
                $('#content-wrap').animate({'left': 0}).removeClass('navOpen');
            } else {
                $('#content-wrap').animate({'left': 250}).addClass('navOpen');
            }

        });

/*--END Toggle--*/




$('#myButton').click(function() {
    
    $('#myModal').modal();
    
});