JSFiddle - React, Tailwind, and code Playground

by jiggle

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
 <div data-role="view" data-title="Titanic Belfast" id="scroller-view">
    <div class="titanic_a">&nbsp;</div>

    <h2>Titanic Belfast</h2>

    <div data-role="scroller" class="scroller-content">
        <div>
           The world's largest Titanic experience is opening today in Belfast, Ireland - the place where the iconic ship had been designed and built.
        </div>
        <div>
           The 14,000-sq-m structure took three years to build - the same timespan as the Titanic itself - and like the boat it omits a luxurious aeasthetic. Guests confront a shimmering facade that's made of four peaking triangular shells, resembling 27-m-high vertical ship hulls.
        </div>
        <div>
           Titanic Belfast&reg; extends over nine galleries, with multiple dimensions to the exhibition, drawing together special effects, dark rides, full-scale reconstructions and innovative interactive features to explore the Titanic story in a fresh and insightful way; from her conception in Belfast in the early 1900s, through her construction and launch, to her infamous maiden voyage and catastrophic demise. The journey goes beyond the aftermath of the sinking, to the discovery of the wreck and continues into the present day with a live undersea exploration centre. 
        </div>
    </div>

    <div class="titanic_b">&nbsp;</div>


    <div data-role="scroller" class="scroller-content">
        <div>
            'Its architectural...

CSS

<style scoped>
    .titanic_a, .titanic_b, .titanic_c {
        display: block;
        height: 230px;
        background: url(../../content/mobile/shared/titanic1.jpg) no-repeat center center;
        -webkit-background-size: 100% auto;
        background-size: 100% auto;
    }

    .titanic_b {
        background: url(../../content/mobile/shared/titanic2.jpg) no-repeat center center;
    }
    
    .titanic_c {
        background: url(../../content/mobile/shared/titanic3.jpg) no-repeat center center;
    }

    #scroller-view h2{
        margin: 15px 10px 0 10px;
    }

    #scroller-view img {
        -webkit-transform: translatez(0);
    }

    #scroller-view .scroller-content {
        
        height: 130px;
        margin: 15px 0;
        background-color: rgba(0, 0, 0, 0.07);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) inset;
    }
    
    .km-ios #scroller-view .km-navbar {
        background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, rgba(255, 255, 255, 0.5)), color-stop(0.06, rgba(255, 255, 255, 0.45)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(1, rgba(100, 100, 100, 0))), url(../../content/shared/images/patterns/pattern9.png);
        background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.45) 6%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(100, 100, 100, 0)), url(../../content/shared/images/patterns/pattern9.png);
	}
	.km-tablet .km-ios #scroller-view .km-view-title {
        color: #fff;
        text-shadow: 0 -1px rgba(0,0,0,.5);
    }
    
    .km-ios #scroller-view .km-navbar .km-button {
        background-color: rgba(0,0,0,0.2);
    }
</style>

JavaScript

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