JSFiddle - React, Tailwind, and code Playground

by Samuel Guimarães

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"></script>
<div class="container">
  <div class="row">
    <div id="log">
    </div>
  </div>

  <div class="row">
    <div class="well">
      <select id="adapters" class="selecpicker"></select>
      <button class="btn btn-primary update-sensors">Update</button>
    </div>
  </div>

  <div class="row">
    <div class="well">
      <div id="sensors">
      </div>
    </div>
  </div>

CSS

ul.nav > li > span.tree-toggle {
  font-weight: 600;
  cursor: pointer;
}

ul.nav > li > ul {
  display: none;
  padding: 5px 5px 5px 22px;
}

ul.nav > li.active > ul {
  display: block;
}

ul.nav > li > ul > li> span {
  display: inline-block;
}

ul.nav > li > ul > li > ul > li > span {
  cursor: default;
}

ul.nav > li > span.tree-toggle:before {
  content: "\f196";
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 14px;
  margin-right: 5px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul.nav > li.active > span.tree-toggle:before {
  content: "\f147";
}

JavaScript

$('#sensors').on('click', '.tree-toggle', function() {
  $(this).parent().children('ul.tree').toggle(200);
  $(this).parent().toggleClass('active');
});

var data = {
  "sensors": [{
    "inputs": {
      "cores": [{
        "name": "Core 160-167",
        "unit": "C",
        "input": 36.0
      }, {
        "name": "Core 152-159",
        "unit": "C",
        "input": 35.0
      }, {
        "name": "Core 144-151",
        "unit": "C",
        "input": 36.0
      }, {
        "name": "Core 136-143",
        "unit": "C",
        "input": 33.0
      }, {
        "name": "Core 128-135",
        "unit": "C",
        "input": 33.0
      }, {
        "name": "Core 120-127",
        "unit": "C",
        "input": 33.0
      }, {
        "name": "Core 112-119",
        "unit": "C",
        "input": 32.0
      }, {
        "name": "Core 104-111",
        "unit": "C",
        "input": 33.0
      }, {
        "name": "Core 96-103",
        "unit": "C",
        "input": 33.0
      }, {
        "name": "Core 88-95",
        "unit": "C",
        "input": 34.0
      }, {
        "name": "Core 80-87",
        "unit": "C",
        "input": 33.0
      }, {
        "name": "Core 72-79",
        "unit": "C",
        "input": 32.0
      }, {
        "name": "Core 64-71",
        "unit": "C",
        "input": 32.0
      }, {
        "name": "Core 56-63",
        "unit": "C",
        "input": 32.0
      }, {
        "name": "Core 48-55",
        "unit": "C",
        "input": 33.0
      }, {
        "name": "Core 40-47",
        "unit": "C",
        "input": 38.0
      }, {
        "name": "Core 32-39",
        "unit": "C",
        "input": 36.0
      }, {
        "name": "Core 24-31",
        "unit": "C",
        "input": 37.0
      }, {
        "name": "Core 16-23",
        "unit": "C",
        "input": 38.0
      }, {
        "name": "Core 8-15",
        "unit": "C",
        "input": 37.0
      }, {
        "name": "Core 0-7",
        "unit": "C",
        "input": 38.0
      }],
   ...