JSFiddle - React, Tailwind, and code Playground

by ecropolis

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": "audio",
            "children" : [
                {
                    "data" : {
                        "title": "juicy.mp3" 
                    },
                    "attr": {
                        "href": "audio/juicy.mp3",
                        "id": "1239" 
                    },
                    "icon": "images\/mp3-icon.gif" 
                },
                {
                    "data" : {
                        "title": "uptown.mp3" 
                    },
                    "attr": {
                        "href": "audio/uptown.mp3",
                        "id": "1239" 
                    },
                    "icon": "images\/mp3-icon.gif" 
                } 
            ] 
        },
        {
            "data": "fun.wmv" 
        },
        {
            "data": "herman.wmv" 
        },
        {
            "data": "jimmy.wmv" 
        },
        {
            "data": "videos",
            "children" : [
                {
                    "data" : {
                        "title": "abc.mp4" 
                    },
                    "attr": {
                        "href": "videos/abc.mp4",
                        "id": "1239" 
                    },
                    "icon": "images\/mp4-icon.gif" 
                },
                {
                    "data" : {
                        "title": "cleaver.mp4" 
                    },
                    "attr": {
                        "href": "videos/cleaver.mp4",
                        "id": "1239" 
                    },
                    "icon": "images\/mp4-icon.gif" 
                },
                {
                    "data" : {
                        "title": "funny" 
                    },
                    "attr": {
                        "href": "videos/funny",
                        "id": "1239" 
                    },
       ...