JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script>
<br/>
<div class="container">
    <div class="col-md-5">
    
        Select Car : <br/>
        <input type="text" id="ddlCar" style="width:300px" />
<br/>
<br/>
        Select Multiple Cars :<br/>
<select id="ddlCars" multiple="multiple" style="width:300px">
<option value="Accord">Accord</option>
<option value="Duster">Duster</option>
<option value="Esteem">Esteem</option>
<option value="Fiero">Fiero</option>
<option value="Lancer">Lancer</option>
<option value="Phantom">Phantom</option>
</select>
        
    </div>




<br/>
<br/>

<div class="col-md-5">
    Select Car(s) : <br/>
<div class="input-group input-group-lg select2-bootstrap-append">

                        <select id="ddlCarsCustom" class="form-control select2-multiple select2input" multiple>
                            <option value="Accord">Accord</option>
<option value="Duster">Duster</option>
<option value="Esteem">Esteem</option>
<option value="Fiero">Fiero</option>
<option value="Lancer">Lancer</option>
<option value="Phantom">Phantom</option>
                        </select>
                        <span class="input-group-btn">
                            <button class="btn btn-danger btn-search-home" type="button" data-select2-open="select2-button-addons-multiple-input-group-sm">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </span>
    </div></div>
    </div>

CSS

/**
 * Select2 Bootstrap CSS
 * Compatible with Select2 3.3.2, 3.4.1, 3.4.2 and Twitter Bootstrap 3.0.0
 * MIT License
 */
/**
 * Reset Bootstrap 3 .form-control styles which - if applied to the
 * original <select>-element the Select2-plugin may be run against -
 * are copied to the .select2-container.
 *
 * 1. Overwrite .select2-container's original display:inline-block
 *    with Bootstrap 3's default for .form-control, display:block;
 *    courtesy of @juristr (@see https://github.com/fk/select2-bootstrap-css/pull/1)
 */
.select2-container.form-control {
  background: transparent;
  border: none;
  display: block;
  /* 1 */
  margin: 0;
  padding: 0;
}

/**
 * Adjust Select2 inputs to fit Bootstrap 3 default .form-control appearance.
 */
.select2-container .select2-choices .select2-search-field input,
.select2-container .select2-choice,
.select2-container .select2-choices {
  background: none;
  padding: 0;
  border-color: #cccccc;
  border-radius: 4px;
  color: #555555;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: white;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.select2-search input {
  border-color: #cccccc;
  border-radius: 4px;
  color: #555555;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: white;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.select2-container .select2-choices .select2-search-field input {
  -webkit-box-shadow: none;
  box-shadow: none;
}

/**
 * Adjust Select2 input heights to match the Bootstrap default.
 */
.select2-container .select2-choice {
  height: 34px;
  line-height: 1.42857;
}

/**
 * Address Multi Select2's height which - depending on how many elements have been selected...

JavaScript

// Function to shuffle the demo data 
var shuffle = function (str) {
    return str.split('').sort(function () {
      return 0.5 - Math.random();
    }).join('');
  };

// For demonstration purposes we first make
// a huge array of demo data (20 000 items)
// HEADS UP; for the _.map function i use underscore (actually lo-dash) here
var mockData = function () {
    var array = _.map(_.range(1, 10), function (i) {
        return {
          id  : i,
          text: shuffle('te ststr ing to shuffle') + ' ' + i
        };
      });
    return array;
  };
  var mockData1 = function () {
    var array = _.map(_.range(11, 15), function (i) {
        return {
          id  : i,
          text: shuffle('te ststr ing to shuffle') + ' ' + i
        };
      });
    return array;
  };
  var mockData2 = function () {
    var array = _.map(_.range(16, 20), function (i) {
        return {
          id  : i,
          text: shuffle('te ststr ing to shuffle') + ' ' + i
        };
      });
    return array;
  };
  // create demo data
  var dummyData = mockData();
  var dummyData1 = mockData1();
  var dummyData2 = mockData2();
  dummyData.push({
  text: 'canada',
  children: dummyData1
  });
  dummyData.push({
  text: 'USA',
  children: dummyData2
  });

  // init select 2
  $('#ddlCar').select2({
    data             : dummyData,
    // init selected from elements value
    initSelection    : function (element, callback) {
      var initialData = [];
      $(element.val().split(",")).each(function () {
        initialData.push({
          id  : this,
          text: this
        });
      });
      callback(initialData);
    },

    // NOT NEEDED: These are just css for the demo data
    dropdownCssClass : 'capitalize',
    containerCssClass: 'capitalize',

    // NOT NEEDED: text for loading more results
    formatLoadMore   : function() {return 'Loading more...'},
    
    // query with pagination
    query            : function (q) {
      var pageSize,
        results;
     ...