JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.jquerytools.org/1.2.3/jquery.tools.min.js"></script>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title></title>

        <script src="http://cdn.jquerytools.org/1.2.3/jquery.tools.min.js"></script>
        <link rel="stylesheet" type="text/css" href="scrollable.css" />
    </head>
    <body>
        <a class="prev">prev</a>
        <div class="scrollable">
            <div class="items">
                <div class="row">
                    <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" class="item"/>
                    <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" class="item"/>
                </div>
                <div class="row">
                    <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" class="item"/>
                    <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" class="item"/>
                </div>
                <div class="row">
                    <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" class="item"/>
                    <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" class="item"/>
                </div>
                <div class="row">
                    <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" class="item"/>
                    <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" class="item"/>
                </div>
                <div class="row">
                    <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" class="item"/>
                    <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" class="item"/>
               ...

CSS

/*
    root element for the scrollable.
    when scrolling occurs this element stays still.
*/
.scrollable {

    /* required settings */
    position:relative;
    overflow:hidden;
    width: 220px; /* Editable */
    height: 390px; /* Editable */

    border: 2px solid black;
    padding: 20px 30px;
}

/*
    root element for scrollable items. Must be absolutely positioned
    and it should have a extremely large width to accommodate scrollable items.
    it's enough that you set width and height for the root element and
    not for this element.
*/
.scrollable .items {
    /* this cannot be too large */
    height:20000em;
    position:absolute;
}

/*
    a single item. must be floated in horizontal scrolling.
    typically, this element is the one that *you* will style
    the most.
*/
.items img {
}

.scrollable .item {
    width: 90px;
    height: 90px;
    background: #f0f0f0;
    padding: 5px;
    margin: 5px 3px;
    border: 1px solid #ddd;
    float: left;
}
.scrollable .item:hover {

}

.scrollable .row {
    clear: both;
}

JavaScript

// execute your scripts when the DOM is ready. this is mostly a good habit
$(function() {

    // initialize scrollable
    $(".scrollable").scrollable({ vertical: true });

});