JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable"/>

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

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

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

CSS

* {margin: 0; padding: 0;}

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

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

footer{
    text-align: center;
    font-style: italic;
}
#parent{
    width:100%;
}
#list{
    font-size: 1.1em;
    height: 50px;
    width:4856px;
    overflow-y: scroll;
    -webkit-transform:translateZ(0px);
    -webkit-overflow-scrolling: touch;
}
#list li{
    border-right: 1px solid #e7e7e7;
    width: 120px;
    float: left;
    list-style-type: none;
    text-align: center;
    white-space: nowrap;
}

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

JavaScript

function buildList(){
    var list = document.getElementById("list"),
        frag = document.createDocumentFragment();
    
    for(var i = 0; i < 40; i++){
        var elem = document.createElement("li");
        elem.innerHTML = "Element " + i;
        frag.appendChild(elem);
    }
    
    list.appendChild(frag);
}
buildList();