JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>

        <title>jScrollPane dynamic width demo</title>

        <!-- styles specific to demo site -->
        <link type="text/css" href="http://jscrollpane.kelvinluck.com/style/demo.css" rel="stylesheet" media="all" />
        <!-- styles needed by jScrollPane - include in your own sites -->
        <link type="text/css" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css" rel="stylesheet" media="all" />

        <style type="text/css" id="page-css">
            /* Styles specific to this particular page */
            #container
            {
                width: 60%;
            }
            pre
            {
                width: 95%;
            }
            .scroll-pane
            {
                width: 100%;
                height: 200px;
                overflow: auto;
            }
            .horizontal-only
            {
                height: auto;
                max-height: 200px;
            }

        </style>

        <!-- the mousewheel plugin -->
        <script type="text/javascript" src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
        <!-- the jScrollPane script -->
        <script type="text/javascript" src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.js"></script>

    </head>
    <body>
        <div id="top-nav">
            <img src="http://jscrollpane.kelvinluck.com/image/logo.png" width="196" height="69" alt="jScrollPane">
            <ul>
                <li><a href="http://jscrollpane.kelvinluck.com/index.html">Home</a></li>
                <li><a href="http://jscrollpane.kelvinluck.com/index.html#examples">Examples</a></li>
                <li><a href="http://jscrollpane.kelvinluck.com/index.html#themes">Themes</a></li>
                <li><a href="http://jscrollpane.kelvinluck.com/index.html#usage">How to use</a></li>
             ...

JavaScript

$(function()
            {
                $('.scroll-pane').each(
                    function()
                    {
                        $(this).jScrollPane(
                            {
                                showArrows: $(this).is('.arrow')
                            }
                        );
                        var api = $(this).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();
                                }
                            }
                        );
                    }
                )

            });