JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<script src="http://static.jstree.com/v.1.0rc2/jquery.jstree.js"></script>
<div id="main">
    <div id="left">
        <div id="tree">
        </div>
    </div>
    <div id="right">
        <ul>
            <li><a href="#a">A</a></li>
            <li><a href="#b">B</a></li>
            <li><a href="#c">C</a></li>
        </ul>
        <div id="a">
            <h3><table><tr><td>algo</td></tr></table></h3>
        </div>
        <div id="b">
            <h3>B is here</h3>
        </div>
        <div id="c">
            <h3>C is here</h3>
        </div>
    </div>
</div>

CSS

#left {
    float: left;
    width: 200px;
    overflow: auto;
}
#right .ui-helper-clearfix { display: inline-block; }

#right {
    margin: 0 0 0 200px;
}

JavaScript

$(document).ready(function() {
    $('#right').tabs();//.find('.ui-helper-clearfix').removeClass('ui-helper-clearfix');
    $('#tree').jstree({
        "plugins" : [ "json_data", "themes"],
        "json_data" : {
            "data" : [
                { 
                    "data" : "A node", 
                    "children" : [ "Child 1", "Child 2", "Child 2", "Child 2", "Child 2", "Child 2" ]
                },
                { 
                    "attr" : { "id" : "li.node.id" }, 
                    "data" : { 
                        "title" : "Long format demo", 
                        "attr" : { "href" : "#" } 
                    } 
                }
            ]
        }, 
    });
});