JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
</head>

<body>
  <nav>
    <ol>
      <li class="intro selected" data-slide-id="intro" data-slide-name="Intro">
        <figure>
          <div class="preview"></div>
          <figcaption>Intro</figcaption>
        </figure>
      </li><li data-slide-id="262">
        <figure>
          <div class="preview"></div>
          <figcaption>1. Form</figcaption>
        </figure>
      </li><li data-slide-id="263">
        <figure>
          <div class="preview"></div>
          <figcaption>2. 3 Rating Scale</figcaption>
        </figure>
      </li><li data-slide-id="264">
        <figure>
          <div class="preview"></div>
          <figcaption>3. Comment</figcaption>
        </figure>
      </li><li data-slide-id="265">
        <figure>
          <div class="preview"></div>
          <figcaption>4. Form</figcaption>
        </figure>
      </li><li class="thanks" data-slide-id="thanks" data-slide-name="Thanks">
        <figure>
          <div class="preview"></div>
          <figcaption>Thanks</figcaption>
        </figure>
      </li>
    </ol>
  </nav>
</body>
</html>

CSS

.jspContainer
{
    position: relative;
    padding-bottom: 100px;
}

.jspPane
{
    position: absolute;
    padding-bottom: 55px;
}

.jspVerticalBar
{
    position: absolute;
    top: 0;
    right: 25px;
    width: 8px;
    height: 100%;
    
}

.jspHorizontalBar
{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background: red;
}

.jspVerticalBar *,
.jspHorizontalBar *
{
    margin: 0;
    padding: 0;
}

.jspCap
{
    display: none;
}

.jspHorizontalBar .jspCap
{
    float: left;
}

.jspTrack
{
    position: relative;
}

.jspDrag
{
    background: red;
    position: relative;
    top: 0;
    left: 0;
    cursor: pointer;
    -webkit-border-radius: 10px; 
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
    float: left;
    height: 100%;
}

.jspArrow
{
    background: #50506d;
    text-indent: -20000px;
    display: block;
    cursor: pointer;
}

.jspArrow.jspDisabled
{
    cursor: default;
    background: #80808d;
}

.jspVerticalBar .jspArrow
{
    height: 16px;
}

.jspHorizontalBar .jspArrow
{
    width: 16px;
    float: left;
    height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
    outline: none;
}

.jspCorner
{
    background: #eeeef4;
    float: left;
    height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
    margin: 0 -3px 0 0;
}

nav {
  height: 100%;
}
nav ol {
  margin: 10px 0 0 0;
  height: 100%;
  overflow: auto;
  border: 1px solid #f00;
}
nav li {
  padding: 8px 0 5px 30px;
  cursor: pointer;
}
nav li figure .preview {
    background: #fff;
    width: 120px;
    height: 76px;
}
nav li figure figcaption {
    color: #777;
    margin-top: 5px;
    font-size: 85%;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
nav li.selected {
  border: 1px solid #222;
  border-right: 1px solid rgba(255,255,255,0.15);
  position: relative;
  border-left: 0;
  background-color: #7f7f7f
}
nav li.selected figcaption {
  color: #ccc;
  font-weight:...

JavaScript

var pane = $('nav ol')
  pane.css({'height': $(window).height() - 55});
  var element = pane.jScrollPane({
    hideFocus: true,
    verticalGutter: 0
  });
  var api = element.data('jsp');
  var throttleTimeout;
  $(window).bind(
            'resize',
            function()
            {
                if ($.browser.msie) {
                    // IE fires multiple resize events while you are dragging the browser window which
                    // causes it to crash if you try to update the scrollpane on every one. So we need
                    // to throttle it to fire a maximum of once every 50 milliseconds...
                    if (!throttleTimeout) {
                        throttleTimeout = setTimeout(
                            function()
                            {
                                api.reinitialise();
                                throttleTimeout = null;
                            },
                            50
                        );
                    }
                } else {
                    api.reinitialise();
                    pane.css({'height': $(window).height() - 55});
                }
            }
        );