JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<div id="MyView">

Show widget? <input data-bind="checked: show" type="checkbox" />

<!-- ko if: show() == true -->
<div data-bind="template: {afterRender: MA.initApp}">
    <ul data-bind="foreach: items">
        <li data-bind="text: $data"></li>
    </ul>
</div>
<!-- /ko -->

</div>

JavaScript

// "My App"
MA = {};

// Callback function for when KO has finished.
// Do jQuery stuff here - as an example, turn the background red.
MA.initApp = function() {
    var random_index = (Math.floor(Math.random() * 3))
    var color = ["red", "green", "blue"][random_index]
    $("li").css("background-color", color);
}

// A simple view model
MA.view_model = {
    show: ko.observable(true),
    items: ["one", "two", "three", "four"]
}

// On document.ready, apply the KO bindings. KO will render, and
// then when it is done, the afterRender callback will do the jQuery
// work to turn the items red.
$(document).ready(function() {
    ko.applyBindings(MA.view_model, $("#MyView")[0]);
});