JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-default/index.css">
</head>
<body>
  <div id="app">
    <el-tree
      node-key="id"
      default-expand-all
      :data="table"
      :render-content="renderContent"
      :props="defaultProps">
    </el-tree>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/[email protected]/lib/index.js"></script>
  <script src="./script.js"></script>
  <script>
  </script>
</html>

JavaScript

new Vue({
	el: '#app',
	data: function() {
		return {
			table : [
				{
					id: 1,
					label: "Level one 1",
					children: [
						{
							id: 2,
							label: "Level two 1"
						},
						{
							id: 3,
							label: "Level two 2",
							children: [
								{
									id: 5,
									label: "Level three 1"
								},
								{
									id: 6,
									label: "Level three 2"
								},
								{
									id: 7,
									label: "Level three 3"
								},
							]
						},
						{
							id: 4,
							label: "Level two 3"
						},
					]
				},
			],
			defaultProps: {
				children: "children",
				label: "label"
			},
			renderContent(h, { node, data, store }){
				console.log(h);
				return h("span", [
					h("span", node.label),
					h("span", { attrs: { style: "float: right; margin-right: 20px;" } }, [
						h("el-button", { attrs: { type: "primary", size: "mini" } }, "button")
					])
				]);
			}
		}
	}
})