JSFiddle - React, Tailwind, and code Playground

by fiddlegrimbo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slidebars/2.0.2/slidebars.min.css">

<!--script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slidebars/2.0.2/slidebars.min.js"></script>

<body class="no-mp">

<!-- Navbar -->
<nav class="navbar navbar-default navbar-fixed-top sb-slide" role="navigation" title="Menu">
  <!-- Left Control -->
  <div class="sb-toggle-left navbar-left">
    <div>Menu</div>
  </div>
  <h1>TITLE</h1>
</nav>

<div id="sb-site" canvas="container">

<div class="center">
<div class="content-outer">
<div class="content-inner">

***PAGE_CONTENT***

</div>
</div>
</div>

</div>

<div off-canvas="sb-left left reveal" class="sb-slidebar sb-left menu-padding">
  <nav>
    <ul class="sb-menu">
      <li><a href="./1.html">1</a></li>
      <li><a href="./2.html">2</a></li>
      <li><a href="./3.html">3</a></li>
    </ul>
  </nav>
</div>

<script>
(function ($) {
  var controller = new slidebars();
  controller.init();

  // Toggle left
  $( '.sb-toggle-left' ).on( 'click', function ( event ) {
    event.preventDefault();
    event.stopPropagation();

    controller.toggle( 'sb-left' );
  } );

})($);
</script>

</body>

CSS

html, body {
  font-family: "Times New Roman", serif;
  font-size: 12pt;
  padding: 0;
  margin: 0;
  background: white;
}

.navbar-fixed-top, .navbar-fixed-bottom {
  position: fixed;
  z-index: 1030;
}

.navbar {
  font-family: Tahoma;
  background-color: #1063be; /*IE8*/
  background-color: rgba(16, 99, 190, 1);
}

.navbar .sb-toggle-left, .navbar .sb-toggle-right {
  width: 40px;
}

.navbar h1 {
  font-family: Tahoma;
  color: white;
  font-size: 14pt;
}

.content-outer {
  display: inline-block;
  width: 100%;
  max-width: 640px;
  margin: 0;
  padding: 0;
}

.content-inner {
  margin: 0;
  padding: 0.5em;
  text-align: left;
}

.vh100 {
  min-height: 100vh;
}

.site-version {
  color: lightgray;
}

html, body {
	background-color: #222222;
}

#sb-site {
	box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.3); /* Shadow cast onto the slidebars when opened. */
	padding: 50px 0 30px 0;
}

nav h1 {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  margin: 13px;
}

/* moves the menu out from under the fixed navbar */
.menu-padding {
  margin: 0;
  padding: 0;
  padding-top: 49px;
}

.navbar {
	box-shadow: /* Shadow beneath the bar and edge highlights. */
		/* Layered single pixel shadows to create a one sided shadow effect. */
		0 5px 0 0 rgba(0, 0, 0, 0.01),
		0 4px 0 0 rgba(0, 0, 0, 0.02),
		0 3px 0 0 rgba(0, 0, 0, 0.04),
		0 2px 0 0 rgba(0, 0, 0, 0.06),
		0 1px 0 0 rgba(0, 0, 0, 0.08),
		/* Top highlight */
		0 1px 0 0 rgba(255, 255, 255, 0.1) inset,
		/* Left highlight */
		1px 0 0 0 rgba(255, 255, 255, 0.1) inset,
		/* Right highlight */
		-1px 0 0 0 rgba(255, 255, 255, 0.1) inset,
		/* Bottom lowlight */
		0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
		
	/* Glass gradient overlay. */
	background-image: -webkit-linear-gradient(top, rgba(255,255,255, 0.05) 50%, rgba(0,0,0, 0.02) 51%); /*  Webkit syntax. */
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.02) 51%); /* Final syntax. */
	background-size: 100%;
	background-repeat:...