JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<script src="http://www.ztree.me/v3/js/jquery.ztree.core-3.5.js"></script>
<link rel="stylesheet" href="http://www.ztree.me/v3/css/zTreeStyle/zTreeStyle.css">
<div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
</div>
<!--

<div>
    <h1>
        <br>
        <span></span>
    </h1>
    <h2></h2>
    <div>
        <h4></h4>
    </div>
    <a></a>
</div>

-->

CSS

.ztree * {font-size: 10pt;font-family:"Microsoft Yahei",Verdana,Simsun,"Segoe UI Web Light","Segoe UI Light","Segoe UI Web Regular","Segoe UI","Segoe UI Symbol","Helvetica Neue",Arial}
.ztree li {line-height:30px;}
.ztree li a {width:200px;height:30px;padding-top: 0px;}
.ztree li a:hover {text-decoration:none; background-color: #E7E7E7;}
/*.ztree li a span.button.switch {visibility:hidden}
.ztree.showIcon li a span.button.switch {visibility:visible}*/
.ztree li a.curSelectedNode {background-color:#D4D4D4;border:0;height:30px;}
.ztree li span {line-height:30px;}
.ztree li span.button {margin-top: -7px;}
/* .ztree li span.button.switch {width: 16px;height: 16px;} */

/* .ztree li a.level0 span {font-size: 150%;font-weight: bold;} */
.ztree li span.button {background-image:url("http://www.ztree.me/v3/demo/en/super/left_menuForOutLook.png"); *background-image:url("http://www.ztree.me/v3/demo/en/super/left_menuForOutLook.gif")}
.ztree li span.button.switch.level0 {width: 20px; height:20px}
.ztree li span.button.switch.level1 {width: 20px; height:20px}
.ztree li span.button.noline_open {background-position: 0 0;}
.ztree li span.button.noline_close {background-position: -18px 0;}
/* .ztree li span.button.noline_open.level0 {background-position: 0 -18px;}
.ztree li span.button.noline_close.level0 {background-position: -18px -18px;} */

JavaScript

zTree_Menu = null;
var curMenu = null;
		var setting = {
			view: {
				showLine: false,
				showIcon: false,
				selectedMulti: false,
				dblClickExpand: false,
				addDiyDom: addDiyDom
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeClick: beforeClick
			}
		};

		var zNodes =[
  {
    "id": 1,
    "pId": 0,
    "name": "DIV"
  },
  {
    "id": "11",
    "pId": 1,
    "name": "DIV"
  },
  {
    "id": "111",
    "pId": "11",
    "name": "DIV"
  },
  {
    "id": "1111",
    "pId": "111",
    "name": "DIV"
  },
  {
    "id": "11111",
    "pId": "1111",
    "name": "P"
  },
  {
    "id": "111111",
    "pId": "11111",
    "name": "SPAN"
  },
  {
    "id": "111112",
    "pId": "11111",
    "name": "SPAN"
  },
  {
    "id": "1112",
    "pId": "111",
    "name": "DIV"
  },
  {
    "id": "11121",
    "pId": "1112",
    "name": "UL"
  },
  {
    "id": "111211",
    "pId": "11121",
    "name": "LI"
  },
  {
    "id": "1112111",
    "pId": "111211",
    "name": "A"
  },
  {
    "id": "111212",
    "pId": "11121",
    "name": "LI"
  },
  {
    "id": "1112121",
    "pId": "111212",
    "name": "A"
  },
  {
    "id": "111213",
    "pId": "11121",
    "name": "LI"
  },
  {
    "id": "1112131",
    "pId": "111213",
    "name": "A"
  },
  {
    "id": "111214",
    "pId": "11121",
    "name": "LI"
  },
  {
    "id": "1112141",
    "pId": "111214",
    "name": "A"
  },
  {
    "id": "111215",
    "pId": "11121",
    "name": "LI"
  },
  {
    "id": "1112151",
    "pId": "111215",
    "name": "A"
  },
  {
    "id": "111216",
    "pId": "11121",
    "name": "LI"
  },
  {
    "id": "1112161",
    "pId": "111216",
    "name": "A"
  },
  {
    "id": "111217",
    "pId": "11121",
    "name": "LI"
  },
  {
    "id": "1112171",
    "pId": "111217",
    "name": "A"
  },
  {
    "id": "1113",
    "pId": "111",
    "name": "DIV"
  },
  {
    "id": "112",
    "pId": "11",
    "name": "DIV"
  },
  {
    "id": "1121",
    "pId": "112",
    "name":...