JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-3.2/select2.css">
<script src="https://raw.github.com/ivaynberg/select2/master/select2.js"></script>
<div id="source2"></div>

JavaScript 1.7

data = [
  {"name": "Alaskan/Hawaiian Time Zone", "children": [
      {"name": "Pif", "children": [
          {"id": "1aa", "name": "Alaska"}, 
          {"id": "1ab", "name": "Hawaii"}
      ]}, 
      
      {"name": "Pof", "children": [
          {"id": "2ba", "name": "Alaska2"}, 
          {"id": "2bb", "name": "Hawaii2"}
      ]}
  ]},
  
  {"name": "Pacific Time Zone", "children": [
      {"id": 'CA', "name": 'California'}, 
      {"id": 'NV', "name": 'Nevada'}, 
      {"id": 'OR', "name": 'Oregon'}, 
      {"id": 'WA', "name": 'Washington'}
  ]}
];


$("#source2").select2({
  width: "300px", 
  data: {results: data, text: "name"}, 
  formatSelection: function(item) { 
      return item.name 
  }, 
  formatResult: function(item) { 
      return item.name 
  }
});