JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.js"></script>
<select multiple="multiple" class="form-control" id="tags" style="width: 400px;">
  <option value="tag1">tag1</option>
  <option value="tag2">tag2</option>
</select>

JavaScript

$('#tags').select2({
        tags: true,
        tokenSeparators: [','],
        ajax: {
            url: 'https://api.myjson.com/bins/444cr',
            dataType: 'json',
            processResults: function(data) {
              return {
                results: data
              }
            }
        },

        // Some nice improvements:

        // max tags is 3
        maximumSelectionLength: 3,

        // add "(new tag)" for new tags
        createTag: function (params) {
          var term = $.trim(params.term);

          if (term === '') {
            return null;
          }

          return {
            id: term,
            text: term + ' (new tag)'
          };
        },
    });