JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://select2.github.io/select2/select2-3.5.2/select2.js"></script>
<link rel="stylesheet" href="http://select2.github.io/select2/select2-3.5.2/select2.css">
<input type="hidden" id="tags" value="tag1,tag2" style="width: 400px;">

JavaScript

$('#tags').select2({
    tags: true,
    tokenSeparators: [',', ' '],
    createSearchChoice: function (term) {
        return {
            id: $.trim(term),
            text: $.trim(term)
        };
    },
    
    // Take default tags from the input value
    initSelection: function (element, callback) {
        var data = [];

        function splitVal(string, separator) {
            var val, i, l;
            if (string === null || string.length < 1) return [];
            val = string.split(separator);
            for (i = 0, l = val.length; i < l; i = i + 1) val[i] = $.trim(val[i]);
            return val;
        }

        $(splitVal(element.val(), ",")).each(function () {
            data.push({
                id: this,
                text: this
            });
        });

        callback(data);
    },

    // Some nice improvements:

    // max tags is 3
    maximumSelectionSize: 3,

    // override message for max tags
    formatSelectionTooBig: function (limit) {
        return "Max tags is only " + limit;
    }
});