JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css "></script>
<script src="http://cdn.kendostatic.com/2012.1.515/styles/kendo.blueopal.min.css "></script>
<div id="container">
    <div id="myList" data-role="listview" data-bind="source:dataSource" data-template="template" style="width:100%"></div>
</div>
<script type="text/kendo-x-template" id="template">
    <div syle="float:left;">title exp1: <span data-bind="text:Title"></span></div>
    <div syle="float:left;">title exp2: #= data.Title #</div>
    <div syle="float:left;">title exp3: ${Title}</div>
    <div syle="float:left;"><a href="javascript:{}" data-bind="events:{click:alertAction}">title exp4: #: get("Title") #</a></div>
    <br style="clear:both;" />
</script>

JavaScript

var vm = new kendo.observable({
    dataSource:[
            {Title:"Test 1"},
                {Title:"Test 2"},
                {Title:"Test 3"},
                {Title:"Test 4"},
                {Title:"Test 5"}
            ]
    ,
    
    alertAction:function(e){
        alert(e.data.Title);
    }
    
    });

kendo.bind($("#container"), vm);