JSFiddle - React, Tailwind, and code Playground

by Lakshman Kambam

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<select class="js-example-tags form-control" multiple="multiple">
  <option selected="selected">orange</option>
  <option selected="selected">white</option>
  <option selected="selected">purple</option>
  <option selected="selected">red</option>
  <option selected="selected">blue</option>
  <option selected="selected">green</option>
</select>
<div class="js-example-tags-container"></div>

SCSS

body {
  padding: 2em;
  background: #E2EDFB;
}

.js-example-tags-container ul {
  list-style: none;
  padding: 0;
}

.tag-selected {
  list-style: none;
  background-color: #e4e4e4;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: default;
  float: left;
  margin-right: 5px;
  margin-top: 5px;
  padding: 0 5px;
}

.destroy-tag-selected {
  color: #999;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  margin-right: 2px;
  &:hover {
    text-decoration: none;
  }
}

.select2-selection__choice {
  display: none;
}

JavaScript

$(document).ready(function() {
  $(".js-example-tags").select2({
    tags: true
  }).on('change', function() {
    var $selected = $(this).find('option:selected');
    var $container = $(this).siblings('.js-example-tags-container');

    var $list = $('<ul>');
    $selected.each(function(k, v) {
      var $li = $('<li class="tag-selected"><a class="destroy-tag-selected">×</a>' + $(v).text() + '</li>');
      $li.children('a.destroy-tag-selected')
        .off('click.select2-copy')
        .on('click.select2-copy', function(e) {
          var $opt = $(this).data('select2-opt');
          $opt.attr('selected', false);
          $opt.parents('select').trigger('change');
        }).data('select2-opt', $(v));
      $list.append($li);
    });
    $container.html('').append($list);
  }).trigger('change');
});