JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.metro.min.css">
<div class="twit-reader">
<div id="listView"></div>
</div>
<script type="text/x-kendo-tmpl" id="template">
<div class="twit">
<a class="t-link" href="http://www.twitter.com/${from_user}" title="${from_user}"><img width="48" height="48" src="${profile_image_url}" alt="${from_user}" /></a>
<p>${text}</p>
</div>
</script>
CSS
html {
background: lightgreen;
}
.k-listview {
min-height: 100%;
position: relative;
}
.twit-reader
{
width: 340px;
margin: 0 auto;
padding: 0;
border: 0;
border: 1px solid rgba(0,0,0,0.1);
height: 400px;
overflow: auto;
}
.k-listview
{
padding: 0;
border: 0;
}
.twit
{
width: 300px;
height: 80px;
margin: 0;
padding: 10px;
border-top: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
border-bottom: 1px solid rgba(0,0,0,0.1);
border-left: 1px solid rgba(255,255,255,0.1);
}
.twit img
{
border: 3px solid rgba(0,0,0,0.1);
-webkit-border-radius: 27px;
-moz-border-radius: 27px;
border-radius: 27px;
float: left;
}
.twit a:hover img
{
border: 3px solid rgba(150,150,150,0.7);
}
.twit p
{
float: left;
margin: 0;
padding: 0 0 0 10px;
width: 230px;
}
.twit:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
JavaScript
$(document).ready(function() {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://search.twitter.com/search.json",
contentType: "application/json; charset=utf-8",
type: "GET",
dataType: "jsonp",
data: {
q: "#kendoui"
}
}
},
schema: {
data: "results",
total: "results_per_page"
}
});
$("#pager").kendoPager({
dataSource: dataSource
});
$("#listView").kendoListView({
dataSource: dataSource,
template: kendo.template($("#template").html())
});
});