jube-fork/Jube.App/wwwroot/kendo/examples/mobile-tabstrip/index.html

<div data-role="view" id="tabstrip-profile" data-title="Profile" data-layout="mobile-tabstrip">
    <img src="content/shared/images/eduardo.jpg" class="km-thumbnail" style="width: 10em; height: 10em; margin: 2em auto; display: block; float: none;">
    <ul data-role="listview" data-style="inset" data-type="group">
        <li>Profile
            <ul>
                <li>Eduardo Batista</li>
                <li>Weekly average sales <span class="sales-up">$ 8,250</span></li>
                <li>Monthly average sales <span class="sales-up">$ 32,000</span></li>
            </ul>
        </li>
        <li>
            Languages
            <ul>
                <li>English <span class="value">Native</span></li>
                <li>Hungarian <span class="value">Advanced</span></li>
                <li>French <span class="value">Advanced</span></li>
                <li>Chinese <span class="value">Beginner</span></li>
            </ul>
        </li>
        <li>
            Sales commodity
            <ul>
                <li>Beverages</li>
                <li>Condiments</li>
                <li>Confections</li>
                <li>Diary Products</li>
                <li>Grains/Cereals</li>
                <li>Meat/Poultry</li>
                <li>Produce</li>
                <li>Seafood</li>
            </ul>
        </li>
        <li>
            PC Skills
            <ul>
                <li>MS Word</li>
                <li>MS Excel</li>
                <li>MS Outlook</li>
                <li>MS PowerPoint</li>
                <li>MS Project</li>
                <li>Windows (XP, Vista)</li>
                <li>Internet</li>
                <li>SAP - Sales and Marketing Module</li>
                <li>MS Visual Studio</li>
                <li>Adobe Acrobat</li>
                <li>CorelDraw</li>
            </ul>
        </li>
    </ul>
</div>

<div data-role="view" id="tabstrip-sales" data-title="Sales History" data-layout="mobile-tabstrip">
    <ul data-role="listview" data-style="inset" data-type="group">
        <li>
            Sales 2011
            <ul>
                <li>January <span class="sales-up">&uarr; $ 35,000</span></li>
                <li>February <span class="sales-down">&darr; $ 25,000</span></li>
                <li>March <span class="sales-down">&darr; $ 23,000</span></li>
                <li>April <span class="sales-up">&uarr; $ 30,000</span></li>
                <li>May <span class="sales-up">&uarr; $ 31,000</span></li>
                <li>June <span class="sales-down">&darr; $ 29,000</span></li>
                <li>July <span class="sales-up">&uarr; $ 35,000</span></li>
                <li>August <span class="sales-up">&uarr; $ 37,000</span></li>
                <li>September <span class="sales-hold">&rarr; $ 37,000</span></li>
                <li>October <span class="sales-hold">&rarr; $ 37,000</span></li>
                <li>November <span class="sales-up">&uarr; $ 38,000</span></li>
                <li>December <span class="sales-up">&uarr; $ 40,000</span></li>
            </ul>
        </li>
    </ul>
</div>

<div data-role="view" id="tabstrip-rating" data-title="Rating" data-layout="mobile-tabstrip">
    <ul data-role="listview" data-style="inset" data-type="group">
        <li>
            Sales Representatives
            <ul>
                <li data-icon="toprated">1. Andrew Fuller</li>
                <li data-icon="toprated">2. Janet Leverling</li>
                <li data-icon="toprated" style="background-color: #26c6da; color: #fff;">3. Eduardo Batista</li>
                <li data-icon="toprated">4. Margaret Johnson</li>
                <li data-icon="toprated">5. Steve Collins</li>
                <li data-icon="toprated">6. Maria Steward</li>
            </ul>
        </li>
    </ul>
</div>

<div data-role="view" id="tabstrip-settings" data-title="Settings" data-layout="mobile-tabstrip">
    <ul data-role="listview" data-style="inset" data-type="group">
        <li>
            Eduardo Batista
            <ul>
                <li>Notify when online <input type="checkbox" data-role="switch" checked></li>
                <li>Administrator <input type="checkbox" data-role="switch"></li>
                <li>Access to stats <input type="checkbox" data-role="switch" checked></li>
            </ul>
        </li>
    </ul>
</div>

<div data-role="layout" data-id="mobile-tabstrip" data-show="showDemoLayout">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" data-icon="home" href="#/"></a>
            <a data-align="right" data-icon="source-code" data-click="goToSourceCode" data-role="button" title="Show this demo source code"></a>
        </div>
    </header>

    <p>TabStrip</p>

    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="#tabstrip-profile" data-icon="contacts">Profile
            </a><a href="#tabstrip-sales" data-icon="history">Sales
            </a><a href="#tabstrip-rating" data-icon="favorites">Rating
            </a><a href="#tabstrip-settings" data-icon="settings">Settings</a>
        </div>
    </div>
</div>

<style>
    .sales-down,
    .sales-hold,
    .sales-up,
    .value {
        float: right;
    }
    .sales-up { color: #4caf50; }
    .sales-down { color: #ff4350; }
    .sales-hold { color: #2196f3; }
    .value { color: #c7cdd0; }
</style>