JSFiddle - React, Tailwind, and code Playground

HTML

<link href="http://harvesthq.github.io/chosen/chosen.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<select data-placeholder="Start typing to select a city" multiple class="chosen-select-width" tabindex="16" id="cities">
  <option>Amsterdam</option>
  <option>Atlanta</option>
  <option>Calgary</option>
  <option>Chicago</option>
  <option>Denver</option>
  <option>Dubai</option>
  <option>Frankfurt</option>
  <option>Hong Kong</option>
  <option>Honolulu</option>
  <option>Houston</option>
  <option>Kuala Lumpur</option>
  <option>London</option>
  <option>Los Angeles</option>
</select>
<br>
<br>
<div id="selectedlist"></div>

CSS

#selectedlist {
  border: solid 1px #eee;
  margin-top: 20px;
  padding: 5px
}
#selectedlist div {
  display:inline-block;
  padding-left: 5px;
  margin:0 2px;
  border: 1px solid;
  background: #ccc;
}
#selectedlist span {
  float: right;
  width: 15px;
  height: 16px;
  line-height: 16px;
  margin: 2px 2px;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  color: red;
  background: royalblue;
}

JavaScript

$(document).ready(function() {
  $(".chosen-select-width").chosen({
    width: "75%"
  });
  $("#cities").change(function(e, chosen) {
    $a = $("<div/>", {
      text: chosen.selected
    }).append(
      $("<span/>", {
        text: "x",
        on: {
          click: function() {
            $(this).parent().remove();
          }
        }
      })).appendTo("#selectedlist");
  });

});