JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://raw.github.com/ivaynberg/select2/master/select2.js"></script>
<h1>Multiple select</h1>
<!-- The tag must be an <input> for tagging support to work -->
<input data-bind="value: tags, select2: {tags: availableTags}" style="width: 300px"/>
<div>
    Selected: <span data-bind="text: ko.toJSON(selectedTagsAsArray)"></span>
</div>

CSS

h1 { font-size: 120%; font-weight: bold; margin-top: 0.5em; margin-bottom: 0.25em; }

/* https://github.com/ivaynberg/select2/raw/master/select2.css */

/*
Version: @@ver@@ Timestamp: @@timestamp@@
*/
.select2-container {
    position: relative;
    display: inline-block;
    /* inline-block for ie7 */
    zoom: 1;
    *display: inline;
    vertical-align: top;
}

.select2-container,
.select2-drop,
.select2-search,
.select2-search input{
  /*
    Force border-box so that % widths fit the parent
    container without overlap because of margin/padding.

    More Info : http://www.quirksmode.org/css/box.html
  */
  -moz-box-sizing: border-box;    /* firefox */
  -ms-box-sizing: border-box;     /* ie */
  -webkit-box-sizing: border-box; /* webkit */
  -khtml-box-sizing: border-box;  /* konqueror */
  box-sizing: border-box;         /* css3 */
}

.select2-container .select2-choice {
    background-color: #fff;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
    background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
    background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
    background-image: -o-linear-gradient(bottom, #eeeeee 0%, #ffffff 50%);
    background-image: -ms-linear-gradient(top, #eeeeee 0%, #ffffff 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#ffffff', GradientType = 0);
    background-image: linear-gradient(top, #eeeeee 0%, #ffffff 50%);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #aaa;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    height: 26px;
    line-height: 26px;
    padding: 0 0 0 8px;
    color: #444;
    text-decoration:...

JavaScript

ko.bindingHandlers.select2 = {
    init: function(element, valueAccessor) {
        $(element).select2(valueAccessor());

        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).select2('destroy');
        });
    },
    update: function(element) {
        $(element).trigger('change');
    }
};

var ViewModel = function () {
    var self = this;
    var selectedTags = 'brown,red,green';
    var availableTags = ['red', 'green', 'blue'];
    this.tags = ko.observable(selectedTags);
    this.availableTags = availableTags;
    this.selectedTagsAsArray = ko.computed(function() {
        return this.tags().split(',');
    }, this);
};

ko.applyBindings(new ViewModel());