JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://demos.telerik.com/kendo-ui/content/spa/websushi/css/style.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.metro.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.metro.min.css">
<script type="text/x-kendo-template" id="index-template">
        <ul data-role="listview" data-bind="source: items" data-template="item" id="main"></ul>
    </script>
<script type="text/x-kendo-template" id="item">
        <li class="products">
            <a class="view-details" href="\#">
                <img class="main-image" src="#= image #" alt="#: name#" title="#: name #" />
                <strong data-bind="text: name"></strong>
                <span class="price"><span>$</span><span data-bind="text: price"></span></span>
            </a>            
            <button class="add-to-cart" data-bind="click: addToCart">Add to cart</button>
        </li>
</script>

<div id="application"></div>

JavaScript

// Working Viewmodel
/*var indexModel = kendo.observable({
    items: myItems,

    addToCart: function (e) {
        alert("Hello There!");
    }
});*/

var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var MyViewModel = (function (_super) {
    __extends(MyViewModel, _super);
    function MyViewModel(myItems) {
        _super.call(this);
        _super.prototype.init.call(this, this);
        this.items = myItems;
    }
    MyViewModel.prototype.addToCart = function (e) {
        alert("Hello There!");
    };
    return MyViewModel;
})(kendo.data.ObservableObject);

var myData = [
    { "id": 1, "name": "Sashimi salad", "price": 12.0, "image": "http://demos.telerik.com/kendo-ui/content/spa/websushi/images/200/sashimi-salad.jpg", "category": "Cold starters", "description": "Organic greens topped with fresh sashimi, wasabi soy vinaigrette.", "featured": true },
    {
        "id": 2, "name": "Chirashi sushi", "price": 21.0, "image": "http://demos.telerik.com/kendo-ui/content/spa/websushi/images/200/chirashi-sushi.jpg", "category": "Cold starters", "description": "Sushi bar variety with sushi rice.", "featured": false
    }];

var myItems = new kendo.data.DataSource({ schema: { model: {} }, data: myData });
var viewModel = new MyViewModel(myItems);
var myView = new kendo.View("index-template", { model: viewModel });
myView.render($("#application"));