JSFiddle - React, Tailwind, and code Playground

by jmansa

HTML

<script src="http://lab.cubiq.org/iscroll/src/iscroll.js"></script>
<div data-role="page" id="simple">
    <div id="header" data-role="header">
        	<h1>Simple</h1>
 <a href="scorecard.html" data-icon="back" data-iconpos="notext" data-rel="back">Back</a>

    </div>
    <div id="wrapper1">
        <div id="scroller1">
            <ul id="thelist1">
                <li>Pretty row 1</li>
                <li>Pretty row 2</li>
                <li>Pretty row 3</li>
                <li>Pretty row 4</li>
                <li>Pretty row 5</li>
                <li>Pretty row 6</li>
                <li>Pretty row 7</li>
                <li>Pretty row 8</li>
                <li>Pretty row 9</li>
                <li>Pretty row 10</li>
                <li>Pretty row 11</li>
                <li>Pretty row 12</li>
                <li>Pretty row 13</li>
                <li>Pretty row 14</li>
                <li>Pretty row 15</li>
                <li>Pretty row 16</li>
                <li>Pretty row 17</li>
                <li>Pretty row 18</li>
                <li>Pretty row 19</li>
                <li>Pretty row 20</li>
                <li>Pretty row 21</li>
                <li>Pretty row 22</li>
                <li>Pretty row 23</li>
                <li>Pretty row 24</li>
                <li>Pretty row 25</li>
                <li>Pretty row 26</li>
                <li>Pretty row 27</li>
                <li>Pretty row 28</li>
                <li>Pretty row 29</li>
                <li>Pretty row 30</li>
                <li>Pretty row 31</li>
                <li>Pretty row 32</li>
                <li>Pretty row 33</li>
                <li>Pretty row 34</li>
                <li>Pretty row 35</li>
                <li>Pretty row 36</li>
                <li>Pretty row 37</li>
                <li>Pretty row 38</li>
                <li>Pretty row 39</li>
                <li>Pretty row 40</li>
            </ul>
        </div>
    </div>
    <div id="footer" data-role="footer"...

CSS

body, ul, li {
    padding:0;
    margin:0;
    border:0;
}
body {
    font-size:12px;
    -webkit-user-select:none;
    -webkit-text-size-adjust:none;
    font-family:helvetica;
}
#header {
    position:absolute;
    z-index:2;
    top:0;
    left:0;
    width:100%;
    height:45px;
    line-height:45px;
    background-color:#d51875;
    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
    background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
    background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
    padding:0;
    color:#eee;
    font-size:20px;
    text-align:center;
}
#header a {
    color:#f3f3f3;
    text-decoration:none;
    font-weight:bold;
    text-shadow:0 -1px 0 rgba(0, 0, 0, 0.5);
}
#footer {
    position:absolute;
    z-index:2;
    bottom:0;
    left:0;
    width:100%;
    height:48px;
    background-color:#222;
    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
    background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
    background-image:-o-linear-gradient(top, #999, #666 2%, #222);
    padding:0;
    border-top:1px solid #444;
}
#wrapper1 {
    position:absolute;
    z-index:1;
    top:45px;
    bottom:48px;
    left:0;
    width:100%;
    background:#aaa;
    overflow:auto;
}
#scroller1 {
    position:absolute;
    z-index:1;
    /*	-webkit-touch-callout:none;*/
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    width:100%;
    padding:0;
}
#scroller1 ul {
    list-style:none;
    padding:0;
    margin:0;
    width:100%;
    text-align:left;
}
#scroller1 li {
    padding:0 10px;
    height:40px;
    line-height:40px;
    border-bottom:1px solid #ccc;
    border-top:1px solid #fff;
    background-color:#fafafa;
    font-size:14px;
}
/* CAROUSEL HERE */
 #wrapper2 {
    width:300px;
    height:160px;
    float:left;
   ...

JavaScript

var myScroll1;
var myScroll2;

function loaded() {
    myScroll1 = new iScroll('wrapper1');

    myScroll2 = new iScroll('wrapper2', {
        snap: true,
        momentum: false,
        hScrollbar: false,
        onScrollEnd: function () {
            document.querySelector('#indicator > li.active').className = '';
            document.querySelector('#indicator > li:nth-child(' + (this.currPageX + 1) + ')').className = 'active';
        }
    });
}

document.addEventListener('touchmove', function (e) {
    e.preventDefault();
}, false);

document.addEventListener('DOMContentLoaded', function () {
    setTimeout(loaded, 200);
}, false);