JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-1.3.0beta.js"></script>
<ul data-bind="foreach: fruits">
    <li>        
        <input type="checkbox" data-bind="checked: $parent.selectedFruits" />
        <span data-bind="text: Description"></span>        
    </li>      
</ul>

CSS

ul { text-align: left }
li { padding: 4px; }
li:nth-child(2n) { background-color: #e5e5e5; }

JavaScript

var fruits = [
    {"Id":5,"Description":"Apple"},
    {"Id":4,"Description":"Orange"},
    {"Id":3,"Description":"Banana"},
    {"Id":2,"Description":"Pineapple"},
    {"Id":6,"Description":"Kiwi"},
    {"Id":7,"Description":"Peach"}
];


function myViewModel() {
    this.selectedFruits = ko.observableArray();
}

var vm = new myViewModel();
ko.applyBindings(vm);