JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
<script src="http://uniformjs.com/javascripts/jquery.uniform.min.js"></script>
<link rel="stylesheet" href="http://uniformjs.com/stylesheets/uniform.aristo.css">
<h2>Click to edit list item:</h2>
<ul data-bind="foreach: items">
    <li data-bind="text: name, click: $root.editItem, css: {bold: bolded()}"></li>
</ul>

<div data-bind="with: selectedItem">
    Edit list item: <input data-bind="value: name" />
    Make it bold: <input type="checkbox" data-bind="checkedUniform: bolded, attr: {title: name}" />
</div>
    
<p>Example using Knockout JS v.2.3.0 and jQuery Uniform JS v.2.1.1 with Aristo theme</p>

CSS

.bold { font-weight: bold; }
li:hover { cursor: pointer; text-decoration: underline; }
p { margin-top: 50px; color: silver; }

JavaScript

ko.bindingHandlers.checkedUniform = {
    init: function (element, valueAccessor) {
        ko.bindingHandlers.checked.init(element, valueAccessor);
        $(element).uniform();
        $.uniform.update($(element));
        $(element).uniform();
    },
    update: function (element, valueAccessor) {
        ko.bindingHandlers.checked.update(element, valueAccessor);
        $.uniform.update($(element));
    }
};

function item(name, bold){
    this.name = ko.observable(name);
    this.bolded = ko.observable(bold);
}

function vm() {
    var that = this;
    this.items = ko.observableArray();
    this.items.push(new item('George Washington', true));
    this.items.push(new item('John Adams', false));
    this.items.push(new item('Thomas Jefferson', true));
    this.selectedItem = ko.observable(this.items()[0]);
    this.editItem = function(item){
        that.selectedItem(item);
    }
}

$('input[type="checkbox"]').uniform();
ko.applyBindings(new vm());