JSFiddle - React, Tailwind, and code Playground

by Christopher McCulloh

HTML

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

<!-- example markup here -->




<div class="modal" id="exampleModal" data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&#xD7;</span>
					<span class="sr-only">Close</span>
				</button>
				<h4 class="modal-title">Remove Field</h4>
			</div>
			<div class="modal-body">
<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>
			</div>
			<div class="modal-footer clearfix">
				<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
				<button type="button" class="btn...

CSS

#exampleModal .modal-content {
  /* new custom width */
  width: 400px;
  /* Left Margin = (600px – [New Width]) / 2 */
  margin-left: 100px;
}

JavaScript

var folders = [
    {
        "name": "Aquire",
        "type": "folder",
        "children": [
            {
                "name": "POS Receipt",
                "type": "item"
            },
            {
                "name": "Confirm Subscription",
                "type": "item"
            },
            {
                "name": "Thanks for Signing Up",
                "type": "item"
            }
        ]
    },
    {
        "name": "Onboard",
        "type": "folder"
    },
    {
        "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"
            },
            {
                "name": "Promotional",
                "type": "folder"
            },
            {
     ...