JSFiddle - React, Tailwind, and code Playground

by shaunxcode

HTML

<script src="http://www.simonbattersby.com/javascript/jquery.mousewheel.min.js"></script>
<script src="http://www.simonbattersby.com/javascript/jquery.sbscroller.js"></script>
<link rel="stylesheet" href="http://www.simonbattersby.com/css/jquery.sbscroller.css">
<div id="scrollpane1" class="scrollpane">         <p>This is the base option with no options selected.</p>         <div class="scroll-content-item">1</div>         <div class="scroll-content-item ">2</div>         <div class="scroll-content-item ">3</div>         <div class="scroll-content-item remove">4</div>         <div class="scroll-content-item remove">5</div>         <div class="scroll-content-item remove">6</div>         <div class="scroll-content-item remove">7</div>         <div class="scroll-content-item remove">8</div>         <div class="scroll-content-item remove">9</div>         <div class="scroll-content-item remove">10</div>         <div class="scroll-content-item remove">11</div>         <div class="scroll-content-item remove">12</div>         <div class="scroll-content-item remove">13</div>         <div class="scroll-content-item remove">14</div>         <div class="scroll-content-item remove">15</div> </div>

CSS

body{font-family:Arial, Helvetica, sans-serif;color:#666666;min-width:600px} h1{margin:20px} p#return{clear:left;margin-left:50px;margin-top:30px} a:active, a:focus{outline:none} .scrollpane{ position:relative;float:left;overflow: auto; width: 420px; height:300px;position:relative;border:1px solid gray;margin-left:50px;margin-bottom:25px;display:inline} .scrollpane p{margin:10px} .scroll-content-item {background-color:#fcfcfc;color:#003366;width:100px;height:100px;float:left;margin:10px;font-size:3em;line-height:96px;text-align:center;border:1px solid gray;display:inline;} .extra-scroll-item {background-color:#fcfcfc;color:#003366;width:100px;height:400px;float:left;margin:10px;font-size:3em;line-height:96px;text-align:center;border:1px solid gray;display:inline;} .expand,.contract{font-size:1.4em;line-height:1.1em;padding-top:10px;cursor:pointer} #toggle{text-align:center;line-height:300px;margin-top:0;text-decoration:underline;color:blue;cursor:pointer} .slider-wrap{border-left:1px solid gray}

CoffeeScript

$('#scrollpane1').sbscroller(mouse: true)