JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dev.webvideodesk.com/hbpanel/public/js/jquery.jstree.js"></script>
<div id="fileview">
        <div id="folders" class="pane">
    
        </div>
        <div id="files" class="pane">
        </div>
</div>

CSS

body,td,th {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
}
#fileview { width: 772px; margin: 0 auto; background-color: #CCC; }
.pane { float: left; margin: 12px 3px; border: #666 thin solid; overflow: auto; padding: 10px; }
#folders { width: 200px; height: 476px; }
#files { width: 500px; height: 476px; background-color:#FFF; }

JavaScript

$(function () {
    $("#folders").jstree({ 
        "json_data" : {
    "data" : [
        {
            "data" : "Videos",
            "children" : [
                {"data" : {"title":"abc.mp4"},"attr":{"href": "Videos/abc.mp4","id": "1239"},"icon": "images\/mp4icon.gif"},
                {"data" : {"title":"june.mp4"},"attr":{"href": "Videos/june.mp4","id": "1239"},"icon": "images\/mp4icon.gif"},
                {"data" : {"title":"cleaver.mp4"},"attr":{"href": "Videos/cleaver.mp4","id": "1239"},"icon": "images\/mp4icon.gif"},
                {
                    "data" : "Funny",
                    "children" : [
                        {"data" : {"title":"bellydance.flv"},"attr":{"href": "Videos/bellydance.flv","id": "1239"},"icon": "images\/flvicon.gif"},
                        {"data" : {"title":"jelloman.wmv"},"attr":{"href": "Videos/jelloman.wmv","id": "1239"},"icon": "images\/wmvicon.gif"} 
                    ] 
                } 
            ] 
        },
        {
        "data" : "Audio",
            "children" : [{
            "data": {
                        "title": "juicy.mp3",
                        "attr": {
                            "href": "Audio/juicy.mp3",
                            "id": "1234"
                        },
                        "icon": "images\/mp3icon.gif"
            }},{
             "data": {
                        "title": "uptown.mp3",
                        "attr": {
                            "href": "Audio/uptown.mp3",
                            "id": "1235"
                        },
                        "icon": "images\/mp3icon.gif"
                    }    
            }
            ]
        },
        {"data" : {"title":"fun.wmv"},"attr":{"href": "fun.wmv","id": "1239"},
                        "icon": "images\/mp3icon.gif"},
        {"data" : {"title":"herman.wmv"},"attr":{"href": "herman.wmv","id": "1239"},
                        "icon": "images\/mp3icon.gif"},
        {"data" :...