JSFiddle - React, Tailwind, and code Playground

by thorst

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<select id="multiselect" multiple="multiple"></select>

CSS

.multiselect-container {
    position:absolute;
    list-style-type:none;
    margin:0;
    padding:0
}
.multiselect-container .input-group {
    margin:5px
}
.multiselect-container>li {
    padding:0
}
.multiselect-container>li>a.multiselect-all label {
    font-weight:700
}
.multiselect-container>li>label.multiselect-group {
    margin:0;
    padding:3px 20px;
    height:100%;
    font-weight:700
}
.multiselect-container>li>a>label {
    margin:0;
    height:100%;
    cursor:pointer;
    font-weight:400
}
.multiselect-container>li>a>label.radio, .multiselect-container>li>a>label.checkbox {
    margin:0
}
.multiselect-container>li>a>label>input[type=checkbox] {
    margin-bottom:5px
}
.btn-group>.btn-group:nth-child(2)>.multiselect.btn {
    border-top-left-radius:4px;
    border-bottom-left-radius:4px
}

JavaScript

/**
  * bootstrap-multiselect.js
  * https://github.com/davidstutz/bootstrap-multiselect
  *
  * Copyright 2012 - 2014 David Stutz
  *
  * Dual licensed under the BSD-3-Clause and the Apache License, Version 2.0.
  */! function ($) {

     "use strict"; // jshint ;_;

     if (typeof ko !== 'undefined' && ko.bindingHandlers && !ko.bindingHandlers.multiselect) {
         ko.bindingHandlers.multiselect = {

             init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

                 var listOfSelectedItems = allBindingsAccessor().selectedOptions,
                     config = ko.utils.unwrapObservable(valueAccessor());

                 $(element).multiselect(config);

                 if (isObservableArray(listOfSelectedItems)) {
                     // Subscribe to the selectedOptions: ko.observableArray
                     listOfSelectedItems.subscribe(function (changes) {
                         var addedArray = [],
                             deletedArray = [];
                         changes.forEach(function (change) {
                             switch (change.status) {
                                 case 'added':
                                     addedArray.push(change.value);
                                     break;
                                 case 'deleted':
                                     deletedArray.push(change.value);
                                     break;
                             }
                         });
                         if (addedArray.length > 0) {
                             $(element).multiselect('select', addedArray);
                         };
                         if (deletedArray.length > 0) {
                             $(element).multiselect('deselect', deletedArray);
                         };
                     }, null, "arrayChange");
                 }
             },

             update: function (element, valueAccessor,...