JSFiddle - React, Tailwind, and code Playground

by madcapnmckay

HTML

<div id="wrapper">
<header role="banner">
    <h1>This is a header</h1>
</header>

<div role="main">
    <ul id="list"></ul>
</div>

<footer>
    <small>This is a footer</small>
</footer>
</div>

CSS

* {margin: 0; padding: 0;}

body{
    font-family: sans-serif;
    font-size: 1.3em;
    overflow: hidden;
}

[role="banner"]{
    background-color: #eee;
    padding: 0.3em 1em;
}

#wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
}

footer{
    text-align: center;
    font-style: italic;
}

#list{
    font-size: 1.1em;
    height: 500px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
#list li{
    border-bottom: 1px solid #e7e7e7;
    padding: 0.6em 0.3em;
}

li.over{
    color: #fff;
    background-color: blue;
}

JavaScript

var $list = $('#list');
for (var i = 0; i < 40; i += 1) {
    var item = $("<li></li>").text("Element " + i).appendTo($list);
}

// disable elastic
//$(document).bind("touchmove" , function(e) { e.preventDefault(); });