JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.mobile.all.min.css">
<div data-role="view" id="buttongroup-home" data-init="mobileMyTasksInit" data-title="My Tasks">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#">Index</a>
        </div>
    </header>

    <ul id="buttongroup">
        <li>Matter</li>
        <li>Date</li>
    </ul>
    
    <div id="groupMatter">
       <ul id="loadmore-listview1"></ul>
       <ul id="loadmore-listview2"></ul>
    </div>
    
    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="#" data-icon="organize">My Task</a>
            <a href="#" data-icon="organize">Matter Task</a>
        </div>
    </div>    
</div>

CSS

#buttongroup-home .head {
    display: block;
    margin: 1em;
    height: 110px;
}

.km-ios .head,
.km-blackberry .head {
    -webkit-border-radius: 10px;
}

#buttongroup {
    margin: 1em auto .4em auto;
}

JavaScript

window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    
function mobileMyTasksInit() {
    
    var dataSource = new kendo.data.DataSource({
        pageSize: 3,
        serverPaging: true,
        transport: {
            read: {
                url: "http://search.twitter.com/search.json", // the remove service url
                dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
            },
            parameterMap: function(options) {
                var parameters = {
                    q: "javascript", //additional parameters sent to the remote service
                    rpp: options.pageSize,
                    page: options.page //next page
                }

                return parameters;
            }
        },
        schema: {
            data: "results"
        }
    });

    $("#loadmore-listview1").kendoMobileListView({
        dataSource: dataSource,
        template: kendo.template("${from_user_name} :: ${text}"),
        loadMore: true
    });
    
     $("#loadmore-listview2").kendoMobileListView({
        dataSource: dataSource,
        template: kendo.template("${from_user_name} @ ${text}"),
        loadMore: true
    });
    

          var listviews = this.element.find(".km-listview-wrapper");

         $("#buttongroup").kendoMobileButtonGroup({
             select: function () {
                 console.log(1);
                 listviews.hide()
                         .eq(this.selectedIndex)
                         .show();
                         },
             index: 0
            }).data("kendoMobileButtonGroup").trigger("select");
    

   
    
}