JSFiddle - React, Tailwind, and code Playground

by codecraig

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>
<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://datatables.net/release-datatables/media/css/demo_page.css">
<link rel="stylesheet" href="http://datatables.net/release-datatables/media/css/demo_table.css">
<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">
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
                <thead> 
                    <tr> 
                        <th>Rendering engine</th> 
                        <th>Browser</th> 
                        <th>Platform(s)</th> 
                        <th>Engine version</th> 
                        <th>CSS grade</th> 
                    </tr> 
                </thead> 
                <tbody> 
                    <tr class="gradeX"> 
                        <td>Trident</td> 
                        <td>Internet
                            Explorer 4.0</td> 
                        <td>Win 95+</td> 
                        <td class="center">4</td> 
                        <td class="center">X</td> 
                    </tr> 
                    <tr class="gradeC"> 
                        <td>Trident</td> 
                        <td>Internet
                            Explorer 5.0</td> 
                        <td>Win 95+</td> 
                        <td class="center">5</td> 
                        <td class="center">C</td> 
                    </tr> 
                    <tr class="gradeA"> 
                        <td>Trident</td> 
                       ...

CSS

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

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

#a {
    border: solid red;
}

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": "#"
                    }
                }}
            ]
        },
    });
});