JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css">
<div class="form-group">
  <label for="tags_id[]" class="control-label col-md-2">Tags</label>
  <div class="col-md-10">
    <select class="form-control" id="tags_id" multiple="multiple" name="tags_id[]"></select>
  </div>
</div>

JavaScript

$('#tags_id').select2({
    minimumInputLength: 2,
    tags: true,
    tokenSeparators: [','],
    ajax: {
        url: 'https://blog.mazedlx.net/tags/',
        type: 'GET',
        dataType: 'json',
        data: function (params) {
            var queryParameters = {
                term: params.term
            }
            return queryParameters;
        },
        processResults: function (data) {
            return {
                results: $.map(data, function (item) {
                    return {
                        text: item.tag,
                        id: item.id
                    };
                })
            };
        }
    }
});