JSFiddle - React, Tailwind, and code Playground

by WilsonPage

HTML

<script src="http://assanka.net/content/tech/files/2011/08/fastclick.min_.js"></script>
<ul class='list-1'>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>    
</ul>

<div class='bottom'>
    <ul class='list-2'>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>      
    </ul>
</div>

CSS

body { height: 100%; }

.bottom { position: absolute; bottom: 0; left: 0; width: 100%; }

ul { list-style-type: none; margin: 0;}
li { height: 40px; margin-bottom: 4px; background: red }

.list-1 { max-height: 200px; overflow-y: scroll; }

.list-2 { width: 100%; white-space: nowrap; overflow-x: scroll; }
.list-2 li { display: inline-block; width: 80px; height: 100px; }

JavaScript

// Set up FastClick on the body
new FastClick(document.body);