JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div class="photos-list" id="photos">
    <div class="thumbnails" id="thumbs">
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="clear"></div>
    </div>
</div>
<div class="scrollbar"> <span class="scrollbar-bg">
        <span class="scrollbar-handle"></span>
</span>
</div>

CSS

body {
    padding: 15px 0 0;
    margin: 0;
}
.clear {
    clear: both;
}
.photos-list {
    position:relative;
    width:100%;
    overflow:hidden;
    height: 175px;
}
.thumbnails {
    padding: 0 10px;
}
.thumbnail {
    float: left;
    width: 150px;
    height: 150px;
    margin: 0 10px;
    background:#000;
}
.scrollbar {
    position:absolute;
    top:200px;
    left:0;
    right:0;
    height:3px;
    padding:0 70px;
}
.scrollbar-bg {
    position:relative;
    display:block;
    width:100%;
    height:3px;
    background:#ddd;
}
.scrollbar-handle {
    position:absolute;
    bottom:0;
    left:0;
    width:12%;
    height:3px;
    background:red;
}

JavaScript

// Set width
var thumbs_width = 0;
$(".thumbnail").each(function () {
    thumbs_width += $(this).outerWidth(true);
});
$("#thumbs").width(thumbs_width);


// Scroll
$(window).on("mousewheel DOMMouseScroll", function (e) {
    e.preventDefault();
    var delta = e.originalEvent.wheelDelta / 120 /* Chrome */ || -e.originalEvent.detail; /* FF */
    var dur = 1.2;
    TweenLite.to($("#photos"), dur, {
        scrollLeft: $("#photos").scrollLeft() - parseInt(delta * 35),
        ease: Expo.easeOut,
        overwrite: 5
    });

    // Move scrollbar!

});