JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<div id="home" data-role="view" data-init="onInit">
        <ul id="list"></ul>
    </div>

    <script id="item-template" type="text/x-kendo-template">
        <div>#: foo #</div>
        #= kendo.render(kendo.template($("\\#user-template").html()), [user]) #
    </script>

    <script id="user-template" type="text/x-kendo-template">
        <input id="dropdownlist" />  
    </script>

JavaScript

$("#dropdownlist").kendoDropDownList({  
  dataSource:{
    data: [  
    { id: 1, name: "India" },  
    { id: 2, name: "China" },  
    { id: 3, name:"Australia"}  
  ]},  
  dataTextField: "name",  
  dataValueField: "id",  
  headerTemplate: '<div><h2>Countries</h2></div>'  
});     
                            
var app = new kendo.mobile.Application();
        function onInit(e) {
            $("#list").kendoMobileListView({
                dataSource: {
                    data: [
                        {foo: "record1", user: { name: "John", age: 23 } },
                        {foo: "record2", user: { name: "Jane", age: 23 } },
                        {foo: "record3", user: { name: "Jack", age: 13 } }
                    ]
                },
                appendOnRefresh: true,
                template: $("#item-template").html()
            });
        }