JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<link rel="stylesheet" href="http://www.berriart.com/sidr/javascripts/vendor/sidr/stylesheets/jquery.sidr.dark.css">
<script src="http://newbz0r.com/jquery.sidr.js"></script>
<a id="left-canvas-menu" href="#left-canvas-content"><button>left</button></a>
<a id="right-canvas-menu" href="#right-canvas-content"><button>right</button></a>
 
<div id="left-canvas-content">
  <ul>
    <li><a href="#">List 1</a></li>
    <li class="active"><a href="#">List 2</a></li>
    <li><a href="#">List 3</a></li>
  </ul>
</div>
<div id="right-canvas-content">
  <ul>
    <li><a href="#">List 1</a></li>
    <li class="active"><a href="#">List 2</a></li>
    <li><a href="#">List 3</a></li>
  </ul>
</div>

JavaScript

$(document).ready(function() {
  $('#left-canvas-menu').sidr({
      name: 'left-canvas-content',
      side: 'left'
    });
  $('#right-canvas-menu').sidr({
      name: 'right-canvas-content',
      side: 'right'
    });
});