JSFiddle - React, Tailwind, and code Playground

by chiragvidani

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.metro.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<div id="example">
    <input id="dropdown" data-role="dropdownlist" data-text-field="dataName" data-value-field="dataValue" data-template="testTemplate" data-bind="value:sourceValue, source:sourceData, events:{change:dataChange}" </div>
        
        <script id="testTemplate" type="text/x-kendo-template">
            1<span style='text-align: left; color: red;'>#: data.dataName#</span><span style='text-align: right;'>#: data.dataValue#</span>
        </script>

JavaScript

$(function () {
    var viewModel = kendo.observable({
        value: "3",
        sourceData: [{
            dataName: "abc",
            dataValue: "1"
        }, {
            dataName: "def",
            dataValue: "2"
        }, {
            dataName: "ghi",
            dataValue: "3"
        }]
    });

    kendo.bind($("#example"), viewModel);
});