JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/demo.css">
<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        
        <title>Basic jScrollPane demo</title>
        
    </head>
    <body>
        
       <div class="col2" id="ActivityPicker">
                <ul>
                    <li id="a1" class="selected active">
                        <div class="selected">
                            <span class="aspNetDisabled"><input type="checkbox" disabled="disabled" checked="checked" name="ctl00$MainContent$chkActivityPack1" id="MainContent_chkActivityPack1"></span><label id="MainContent_lblActivity1" for="MainContent_chkActivityPack1">Activity Pack 1 (Included as standard)</label>
                        </div>
                    </li>
                    <li id="a2" class="">
                        <div>
                            <input type="checkbox" name="ctl00$MainContent$chkActivityPack2" id="MainContent_chkActivityPack2"><label id="MainContent_lblActivity2" for="MainContent_chkActivityPack2">Activity Pack 2</label>
                        </div>
                    </li>
                    <li id="a3">
                        <div>
                            <input type="checkbox" name="ctl00$MainContent$chkActivityPack3" id="MainContent_chkActivityPack3"><label id="MainContent_lblActivity3" for="MainContent_chkActivityPack3">Activity Pack 3</label>
                        </div>
                    </li>
                    <li id="a4">
                        <div>
                            <input type="checkbox" name="ctl00$MainContent$chkActivityPack4"...

CSS

label {
 float:none;
 margin:auto;
 text-align:left;
    
}

div.clear {
clear:both;    
}

#ActivityPicker
{
    margin-left: 20px;
    border:none;
    padding: 6px;
    background-color: #fff;
}
#ActivityPicker div.viewer
{
    float: left;
    background-color: #fff;
    padding:15px 38px 0px 15px;
    height:176px;
    width:295px;
    overflow:hidden;
    border:6px solid #ff8f20;
    background:url("../images/newsbg.gif") repeat-x #fff top left;
}

#ActivityPicker ul
{
    float: left;
}
#ActivityPicker ul li
{
    background-color: #faddb1;
    padding: 6px;
    margin-bottom: 6px;
    list-style: none;
    cursor: pointer;
    width: 244px;
}
#ActivityPicker ul li.selected
{
    background-color: #ffaa4f;
}
#ActivityPicker ul li.selected div label
{
    font-weight: bold;
}
#ActivityPicker ul li.active
{
    width: 250px;
    background-color: #FF8F20;
}
#ActivityPicker ul li:last-child
{
    margin-bottom: 0px;
}
#ActivityPicker ul li div input
{
    float: left;
    margin-right: 10px;
}
#ActivityPicker ul li div label
{
    width:240px;
    cursor:pointer;
    display:block;
}

JavaScript

$(document).ready(function() {
    var api = $('.viewer').jScrollPane().data('jsp');
    api.reinitialise({
        showArrows: true
    });
});