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-pull-to-refresh="true">
        <li>January <span class="sales-up">↑ $ 35,000</span></li>
        <li>February <span class="sales-down">↓ $ 25,000</span></li>
        <li>March <span class="sales-down">↓ $ 23,000</span></li>
        <li>April <span class="sales-up">↑ $ 30,000</span></li>
        <li>May <span class="sales-up">↑ $ 31,000</span></li>
        <li>June <span class="sales-down">↓ $ 29,000</span></li>
        <li>July <span class="sales-up">↑ $ 35,000</span></li>
        <li>August <span class="sales-up">↑ $ 37,000</span></li>
        <li>September <span class="sales-hold">→ $ 37,000</span></li>
        <li>October <span class="sales-hold">→ $ 37,000</span></li>
        <li>November <span class="sales-up">↑ $ 38,000</span></li>
        <li>December <span class="sales-up">↑ $ 40,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>1st Quarter <span class="sales-up">↑ $ 83,000</span></li>
        <li>2nd Quarter <span class="sales-up">↑ $ 90,000</span></li>
        <li>3rd Quarter...

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 app = new kendo.mobile.Application(document.body);