JSFiddle - React, Tailwind, and code Playground

by Stephen Dunne

HTML

<div id="tree" tabindex="1">
    <ul>
        <li>
            <div> <span class="c-treeview-actionButton"></span>
 <span class="c-checkbox"></span>
 <span class="c-treeview-node-container">Sample Tree View</span>

            </div>
            <ul>
                <li>
                    <div> <span class="c-treeview-actionButton"></span>
 <span class="c-checkbox" checked="true"></span>
 <span class="c-treeview-node-container">Node 1</span>

                    </div>
                    <ul></ul>
                </li>
                <li>
                    <div> <span class="c-treeview-actionButton"></span>
 <span class="c-checkbox"></span>
 <span class="c-treeview-node-container">Node 2</span>

                    </div>
                    <ul></ul>
                </li>
                <li>
                    <div> <span class="c-treeview-actionButton"></span><span class="c-checkbox"></span><span class="c-treeview-node-container">Node 3</span>

                    </div>
                    <ul>
                        <li>
                            <div> <span class="c-treeview-actionButton"></span><span class="c-checkbox"></span><span class="c-treeview-node-container">Node 3.1</span>

                            </div>
                            <ul></ul>
                        </li>
                        <li>
                            <div> <span class="c-treeview-actionButton"></span><span class="c-checkbox"></span><span class="c-treeview-node-container">Node 3.2</span>

                            </div>
                            <ul></ul>
                        </li>
                        <li>
                            <div> <span class="c-treeview-actionButton"></span><span class="c-checkbox"></span><span class="c-treeview-node-container">Node 3.3</span>

                            </div>
                            <ul></ul>
                        </li>
                    </ul>
                </li>
                <li>
       ...

CSS

.treeView-ul {
  padding-left: 20px;
  border: 0px dashed black;
}

.treeView {
  list-style: none;
  width: 250px;
  margin: 15px;
  /*float: left; display: inline-block;*/
  background: #feffff;
  /* Old browsers */
  background: -moz-linear-gradient(top, #feffff 0%, #ddf1f9 100%, #a0d8ef 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #feffff), color-stop(100%, #ddf1f9), color-stop(100%, #a0d8ef));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #feffff 0%, #ddf1f9 100%, #a0d8ef 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #feffff 0%, #ddf1f9 100%, #a0d8ef 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #feffff 0%, #ddf1f9 100%, #a0d8ef 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #feffff 0%, #ddf1f9 100%, #a0d8ef 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feffff', endColorstr='#a0d8ef', GradientType=0);
  /* IE6-9 */
}

.treeViewNode {
  min-height: 20px;
  padding: 2px;
}

.treeViewNodeBody {
  display: inline-block;
}

.selectedNode {
  background-color: silver;
}

.focusedNode {
  border: 1px dashed blue;
}

.c-treeview-actionButton {
  cursor: pointer;
}

.c-treeview-node-container {
  cursor: default;
}

.c-checkbox {}

.c-checkbox-active {
  border: 1px solid silver;
  cursor: pointer;
  width: 16px;
  height: 16px;
  background-color: White;
}

.ui-icon {
  float: left;
}

.ui-icon-plus {
  background-position: -16px -128px;
}

.ui-icon-plusthick {
  background-position: -32px -128px;
}

.ui-icon-minus {
  background-position: -48px -128px;
}

.ui-icon-minusthick {
  background-position: -64px -128px;
}

.ui-icon-x {
  background-position: -80px -128px;
}

.ui-icon-xthick {
  background-position: -96px -128px;
}

.ui-icon-check {
  background-position: -64px -144px;
}

.ui-icon-indeterminate {
  background-position: -80px -144px;
}

.ui-icon-none {
  background-position:...

JavaScript

$(function () {
      var Cmb = Cmb || {};
      Cmb.UI = Cmb.UI || {};
      
      Cmb.UI.Enum = Cmb.UI.Enum || {};
      Cmb.UI.Enum.TreeView = Cmb.UI.Enum.TreeView || {};

      Cmb.UI.Enum.TriStateCheckEvent = {
          Click: "click",
          StateChanged: "stateChanged"
      };

      Cmb.UI.Enum.TreeViewEvent = {
          /// <summary>Tree View Events</summary>
          AfterInit: "cmbAfterCarouselRefresh",
          BeforeInit: "cmbBeforeCarouselRefresh",
          NodeSelected: "cmbNodeSelected",
          NodeFocused: "cmbNodeFocused",
          NodeClicked: "cmbNodeClicked",
          AfterNodeUpdate: "cmbAfterNodeUpdate",
          BeforeNodeUpdate: "cmbBeforeNodeUpdate"
      };

      $.widget("cmb.triStateCheckbox", {
          options: {
              state: 0
          },
          widgetEventPrefix: "",
          _create: function () {
              var ctx = this;
              ctx.element.addClass("ui-icon");
              ctx.element.addClass("c-checkbox-active");

              /*set initial state based on checked attribute value*/
              ctx._setOption("state", (ctx.element.attr("checked") != null ? 1 : 2));

              //TODO: change to 'on'
              ctx._on(ctx.element, {
                  click: ctx._click
              });
          },
          _destroy: function () {
              var ctx = this;
              ctx.element.removeClass("ui-icon");
              ctx.element.removeClass("c-checkbox-active");
          },
          _setOption: function (key, value) {
              var ctx = this,
                  prev = ctx.options[key];

              this._super(key, value);
              switch (key) {
                  case "state":
                      Cmb.TriStateCheckbox.updateStyle(ctx);
                      if (prev !== value) {
                          ctx._trigger(Cmb.UI.Enum.TriStateCheckEvent.StateChanged, null, ctx);
                      }
                      break;
              }
          },
 ...