JSFiddle - React, Tailwind, and code Playground

by ariehg

HTML

<script src="http://tests.arieh.co.il/ScrollerBar.js"></script>
<link rel="stylesheet" href="http://tests.arieh.co.il/ScrollerBar.css">
<div id='myDiv1'><p>Lorem  ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip  ex ea  commodo consequat. Duis aute irure dolor in reprehenderit in  voluptate  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur  sint  occaecat cupidatat non proident, sunt in culpa qui officia  deserunt  mollit anim id est laborum.</p></div>
<div id='myDiv2'><p>Lorem  ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip  ex ea  commodo consequat. Duis aute irure dolor in reprehenderit in  voluptate  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur  sint  occaecat cupidatat non proident, sunt in culpa qui officia  deserunt  mollit anim id est laborum.</p></div>
<div id='myDiv3'><p>Lorem  ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip  ex ea  commodo consequat. Duis aute irure dolor in reprehenderit in  voluptate  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur  sint  occaecat cupidatat non proident, sunt in culpa qui officia  deserunt  mollit anim id est laborum.</p></div>
<div id='myDiv4'><p>Lorem  ipsum dolor sit amet, consectetur adipisicing elit, sed do  eiusmod  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad  minim  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip  ex ea  commodo consequat. Duis aute irure dolor in reprehenderit in  voluptate  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur  sint  occaecat...

CSS

#myDiv1 .handle {color:#aa0}
#myDiv2 .handle {color:#a0a}
#myDiv3 .handle {color:#bb8}
#myDiv4 .handle {color:#abc}

JavaScript

var sc1 = new ScrollerBar('myDiv1');
var sc2 = new ScrollerBar('myDiv2',{rtl:true});
var sc3 = new ScrollerBar('myDiv3');
var sc4 = new ScrollerBar('myDiv4',{rtl:true});