JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
    <div data-role="view" id="listview-headers" data-init="mobileListViewHeadersInit" data-title="Fixed Headers">
    <ul id="fixed-listview"></ul>
</div>

<script type="text/x-kendo-template" id="listviewHeadersTemplate">
    <h3 class="item-title">${name}</h3>
</script>

<script>var groupedData = [        
{ name: "A1", letter: "A" },
{ name: "A2", letter: "A" },
{ name: "A3", letter: "A" },
{ name: "A4", letter: "A" },
{ name: "A5", letter: "A" },
{ name: "A6", letter: "A" },
{ name: "A7", letter: "A" },
{ name: "A8", letter: "A" },
{ name: "A9", letter: "A" },
{ name: "A10", letter: "A" },
{ name: "B1", letter: "B" },
{ name: "B2", letter: "B" },
{ name: "B3", letter: "B" },
{ name: "B4", letter: "B" },
{ name: "B5", letter: "B" },
{ name: "B6", letter: "B" },
{ name: "B7", letter: "B" },
{ name: "B8", letter: "B" },
{ name: "B9", letter: "B" },
{ name: "B10", letter: "B" }
];

    function mobileListViewHeadersInit() {
        $("#fixed-listview").kendoMobileListView({
            dataSource: kendo.data.DataSource.create({data: groupedData, group: "letter" }),
            template: $("#listviewHeadersTemplate").html(),
            headerTemplate: "${value}",
            fixedHeaders: true
        });
    }
    var app = new kendo.mobile.Application(document.body);
</script>

CSS

#fixed-listview .item-title {
    margin: 0;
}
.km-listview .km-list {
    margin: 0;
}