Kendo UI Mobile base
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<div data-role="view" id="tabstrip-profile" data-title="Profile" data-layout="mobile-tabstrip">
<ul data-role="listview" data-style="inset" data-type="group">
<li>
<ul>
<li>
<h2>
Carine <span>Callahan</span>
</h2>
</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>
...
CSS
#tabstrip-profile h2
{
display: inline-block;
font-size: 1.1em;
margin: 1.5em 0 0 1em;
}
#tabstrip-profile h2 span
{
display: block;
clear: both;
font-size: 2em;
margin: .2em 0 0 0;
}
#tabstrip-profile img
{
width: 5em;
height: 5em;
float: left;
margin: 1em;
-webkit-box-shadow: 0 1px 3px #333;
box-shadow: 0 1px 3px #333;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.sales-down,
.sales-hold,
.sales-up,
.value
{
float: right;
}
.sales-up { color: green; }
.sales-down { color: red; }
.sales-hold { color: blue; }
.value { color: #bbb; }
JavaScript
new kendo.mobile.Application();