JSFiddle - React, Tailwind, and code Playground

by manikandankathirvel

HTML

<!DOCTYPE html>
<html>
<head>
  <!-- Stylesheets -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-tree/2.22.6/angular-ui-tree.min.css">
  <style>
        .btn {
      margin-right: 8px;
    }

    .angular-ui-tree-handle {
      background: #f8faff;
      border: 1px solid #dae2ea;
      color: #7c9eb2;
      padding: 10px 10px;
    }

    .angular-ui-tree-handle:hover {
      color: #438eb9;
      background: #f4f6f7;
      border-color: #dce2e8;
    }

    .angular-ui-tree-placeholder {
      background: #f0f9ff;
      border: 2px dashed #bed2db;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    tr.angular-ui-tree-empty {
      height: 100px
    }

    .group-title {
      background-color: #687074 !important;
      color: #FFF !important;
    }


    /* --- Tree --- */

    .tree-node {
      border: 1px solid #dae2ea;
      background: #f8faff;
      color: #7c9eb2;
    }

    .nodrop {
      background-color: #f2dede;
    }

    .tree-node-content {
      margin: 10px;
    }

    .tree-handle {
      padding: 10px;
      background: #428bca;
      color: #FFF;
      margin-right: 10px;
    }

    .angular-ui-tree-handle:hover {}

    .angular-ui-tree-placeholder {
      background: #f0f9ff;
      border: 2px dashed #bed2db;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div ng-app="app">
    <div ng-controller="cntrl">
      <!-- Nested node template -->
      <script type="text/ng-template" id="nodes_renderer.html">
        <div ui-tree-handle class="tree-node tree-node-content">
          <a class="btn btn-success btn-xs" ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)"><span
          class="glyphicon"
          ng-class="{
           ...

CSS

.btn {
      margin-right: 8px;
    }

    .angular-ui-tree-handle {
      background: #f8faff;
      border: 1px solid #dae2ea;
      color: #7c9eb2;
      padding: 10px 10px;
    }

    .angular-ui-tree-handle:hover {
      color: #438eb9;
      background: #f4f6f7;
      border-color: #dce2e8;
    }

    .angular-ui-tree-placeholder {
      background: #f0f9ff;
      border: 2px dashed #bed2db;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    tr.angular-ui-tree-empty {
      height: 100px
    }

    .group-title {
      background-color: #687074 !important;
      color: #FFF !important;
    }


    /* --- Tree --- */

    .tree-node {
      border: 1px solid #dae2ea;
      background: #f8faff;
      color: #7c9eb2;
    }

    .nodrop {
      background-color: #f2dede;
    }

    .tree-node-content {
      margin: 10px;
    }

    .tree-handle {
      padding: 10px;
      background: #428bca;
      color: #FFF;
      margin-right: 10px;
    }

    .angular-ui-tree-handle:hover {}

    .angular-ui-tree-placeholder {
      background: #f0f9ff;
      border: 2px dashed #bed2db;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

JavaScript

angular.module('app', ['ui.tree'])
  .controller('cntrl', function($scope) {
   
    $scope.newSubItem = function(scope) {
      var nodeData = scope.$modelValue;
      nodeData.nodes.push({
        id: nodeData.id * 10 + nodeData.nodes.length,
        title: nodeData.title + '.' + (nodeData.nodes.length + 1),
        nodes: []
      });
    };

    $scope.data = [{
                    'id': 1,
                    'title': 'node1',
                    'nodes': [{
                      'id': 11,
                      'title': 'node1.1',
                      'nodes': [{
                        'id': 111,
                        'title': 'node1.1.1',
                        'nodes': []
                      }]
                    }, {
                      'id': 12,
                      'title': 'node1.2',
                      'nodes': []
                    }]
                  }, {
                    'id': 2,
                    'title': 'node2',
                    'nodrop': true,
                    'nodes': [{
                      'id': 21,
                      'title': 'node2.1',
                      'nodes': []
                    }, {
                      'id': 22,
                      'title': 'node2.2',
                      'nodes': []
                    }]
                  }, {
                    'id': 3,
                    'title': 'node3',
                    'nodes': [{
                      'id': 31,
                      'title': 'node3.1',
                      'nodes': []
                    }
                    ]
                  }];

    $scope.data = [{
                    'id': 1,
                    'title': 'node1',
                    'nodes': [{
                      'id': 11,
                      'title': 'node1.1',
                      'nodes': [{
                        'id': 111,
                        'title': 'node1.1.1',
                        'nodes': []
                      }]
                    }]
           ...