JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://testbox.drkameleon.com/peppermint/css/bootstrap.min.css">
<link rel="stylesheet" href="http://testbox.drkameleon.com/peppermint/css/jquery.jqtree.css">
<script src="http://testbox.drkameleon.com/peppermint/js/jquery.jqtree.min.js"></script>
<div id="filetree">

</div>

CSS

#filetree {

	.jqtree-toggler {
		font-family: 'Glyphicons Halflings';
		font-size:12px;
		margin-right:10px;
		//padding:10px;
	}

	.jqtree-element {
		height: 24px;
		text-shadow: 0 0 0.1em #FFF, 0 0 0.1em #FFF;
		padding-left:5px;
	}

	ul.jqtree-tree ul.jqtree_common .jqtree-element
	 {
		//margin-left: 12px;
	}

	li.jqtree-selected > .jqtree-element,
	li.jqtree-selected > .jqtree-element:hover {
		background: -webkit-gradient(linear, left top, left bottom, from(#65B1E0), to(#3188CD));
		background: -moz-linear-gradient(top, #65B1E0, #3188CD);
		background: -ms-linear-gradient(top, #65B1E0, #3188CD);
		background: -o-linear-gradient(top, #65B1E0, #3188CD);
		text-shadow: 0 0 0.1em #000, 0 0 0.1em #000;
		border-top: 1px solid #58A5DA;
		border-bottom: 1px solid #2E7BBD;
		span {
			color: white;
			font-family: Helvetica;
		}

		.jqtree-toggler {
			color: white;
		}
	}

}

JavaScript

// Tree data

var filesTree = 
[
    {
        id: 1,
        label: 'node1',
        children: [
            { id: 2, label: 'child1' , children:
             [
                 { id: 6, label: 'child1.1', children: [
                     { id: 8, label: 'child1.1.1'}
                 ]},
                 { id: 7, label: 'child1.2'}
             ]},
            { id: 3, label: 'child2' }
        ]
    },
    {
        id: 4,
        label: 'node2',
        children: [
            { id: 5, label: 'child3' }
        ]
    }
];

// Tree initialisation

$('#filetree').tree({
    data: filesTree,
    dragAndDrop: true,
    autoOpen: 0,
    saveState: true,
    useContextMenu: false,
});