JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<link rel="stylesheet" href="//www.fuelcdn.com/fuelux/3.5.1/css/fuelux.min.css">
<script src="//www.fuelcdn.com/fuelux/3.5.1/js/fuelux.min.js"></script>
<script src="http://fuelux-snippets.herokuapp.com/img/favicon.ico"></script>
<script src="//www.fuelcdn.com/fuelux-utilities/1.0.0/js/fuelux-utilities.min.js"></script>
<link rel="stylesheet" href="//www.fuelcdn.com/fuelux-mctheme/1.3.4/css/fuelux-mctheme.min.css">
<body style="padding: 10px;" class="fuelux">

<!-- example markup here -->
<p>Example showing selectable folders:</p>
<ul class="tree tree-folder-select" role="tree" id="myTree">
	<li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
		<div class="tree-branch-header">
			<button class="glyphicon icon-caret glyphicon-play"><span class="sr-only">Open</span></button>
			<button class="tree-branch-name">
				<span class="glyphicon icon-folder glyphicon-folder-close"></span>
				<span class="tree-label"></span>
			</button>
		</div>
		<ul class="tree-branch-children" role="group"></ul>
		<div class="tree-loader" role="alert">Loading...</div>
	</li>
	<li class="tree-item hide" data-template="treeitem" role="treeitem">
		<button class="tree-item-name">
			<span class="glyphicon icon-item fueluxicon-bullet"></span>
			<span class="tree-label"></span>
		</button>
	</li>
</ul>

<!-- script dependencies -->






</body>

CSS

body {
  padding: 20px;
}
.tree {
  width: 300px;
  padding: 10px 0 !important;
}

JavaScript

var folders = [
    {
        "name": "Aquire",
        "type": "folder",
        "dataAttributes": { "id": "ID1" },
        "children": [
            {
                "name": "POS Receipt",
                "type": "item"
            },
            {
                "name": "Confirm Subscription",
                "type": "item"
            },
            {
                "name": "Thanks for Signing Up",
                "type": "item"
            }
        ]
    },
    {
        "name": "Onboard",
        "type": "folder",
        "dataAttributes": { "id": "ID2" }
    },
    {
        "name": "Engage",
        "type": "folder",
        "dataAttributes": {
            "id": "engage-folder"
        },
        "children": [
            {
                "name": "Abandoned Cart",
                "type": "folder",
                "children": [
                    {
                        "name": "Archive",
                        "type": "folder"
                    },
                    {
                        "name": "Abandoned Cart - High Value 1",
                        "type": "item"
                    },
                    {
                        "name": "Abandoned Cart - High Value 2",
                        "type": "item"
                    },
                    {
                        "name": "Abandoned Cart - Low Value",
                        "type": "item"
                    }
                ]
            },
            {
                "name": "Birthday",
                "type": "folder"
            },
            {
                "name": "Browse Retargeting",
                "type": "folder"
            },
            {
                "name": "Loyalty",
                "type": "folder"
            },
            {
                "name": "Newsletter",
                "type": "folder"
            },
            {
                "name": "Post-Purchase",
                "type": "folder"
            },
            {
               ...