JSFiddle - React, Tailwind, and code Playground

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.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.mobile.all.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 data-role="view" id="buttongroup-home" data-show="mobileSalesViewInit" data-title="Sales Report">
    <div class="head"> </div>
    <ul id="select-period">
        <li>
            Month
        </li>
        <li>
            Quarter
        </li>
        <li>
            Year
        </li>
    </ul>
        <div data-role="scroller">
            <ul data-role="listview" data-style="inset" data-source="foo" data-template="foo-template" data-pull-to-refresh="true"></ul>
        </div>
        <div data-role="scroller">
    <ul data-role="listview" data-style="inset" data-pull-to-refresh="true" style="display:none">
        <li>1st Quarter <span class="sales-up">↑ $ 83,000</span></li>
        <li>2nd Quarter <span class="sales-up">↑ $ 90,000</span></li>
        <li>3rd Quarter <span class="sales-up">↑ $ 109,000</span></li>
        <li>4th Quarter <span class="sales-up">↑ $ 115,000</span></li>
    </ul>
            </div>
        <div data-role="scroller">
    <ul data-role="listview" data-style="inset" data-pull-to-refresh="true" style="display:none">
        <li>2009 <span class="sales-up">↑ $ 120,000</span></li>
        <li>2010 <span class="sales-down">↓ $ 109,000</span></li>
        <li>2011 <span class="sales-hold">→ $ 109,000</span></li>
    </ul>
            </div>
</div>

<script type="text/x-kendo-template" id="foo-template">
    <div>#= title #</div>
</script>

CSS

#buttongroup-home .head {
	display: block;
    margin: 1em;
	height: 110px;
	background: url(http://demos.telerik.com/kendo-ui/content/mobile/shared/sales.jpg) no-repeat center center;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
}
.km-ios .head,
.km-blackberry .head {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
#select-period {
    margin: 1em auto .4em auto;
}
#buttongroup-home .km-list span {
	float: right;
}
#buttongroup-home .sales-up {
	color: green;
}
#buttongroup-home .sales-down {
	color: red;
}
#buttongroup-home .sales-hold {
	color: blue;
}

JavaScript

function mobileSalesViewInit() {
    var listviews = this.element.find("ul.km-listview");
    
    $("#select-period").kendoMobileButtonGroup({
        select: function(e) {
            listviews.hide()
            .eq(e.index)
            .show();
        },
        index: 0
    });
}

var foo = new kendo.data.DataSource({
    transport: {
        read: {
            url: "https://www.facebook.com/feeds/page.php?id=305102402834390&format=json",
            dataType: "jsonp"
        }
    },
    schema: {
        data: function (response) {
            return response.entries;
        }
    }
});

var app = new kendo.mobile.Application(document.body);