JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/plugins/ScrollToPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/easing/EasePack.min.js"></script>
<section>
     <h2>Gallery title</h2>

    <div id="photos" class="list">
        <div id="thumbs" class="thumbs">
            <figure class="thumbnail"><a href="#">
                    <div class="img"><img src="https://placekitten.com/g/500/333" alt=""></div>
                    <figcaption class="photo-caption"><strong class="photo-title">Photo title</strong><span class="photo-date">Date</span></figcaption>
                </a>

            </figure>
            <figure class="thumbnail"><a href="#">
                    <div class="img"><img src="https://placekitten.com/g/500/333" alt=""></div>
                    <figcaption class="photo-caption"><strong class="photo-title">Photo title</strong><span class="photo-date">Date</span></figcaption>
                </a>

            </figure>
            <figure class="thumbnail"><a href="#">
                    <div class="img"><img src="https://placekitten.com/g/500/333" alt=""></div>
                    <figcaption class="photo-caption"><strong class="photo-title">Photo title</strong><span class="photo-date">Date</span></figcaption>
                </a>

            </figure>
            <figure class="thumbnail"><a href="#">
                    <div class="img"><img src="https://placekitten.com/g/500/333" alt=""></div>
                    <figcaption class="photo-caption"><strong class="photo-title">Photo title</strong><span class="photo-date">Date</span></figcaption>
                </a>

            </figure>
            <figure class="thumbnail"><a href="#">
                    <div class="img"><img...

SCSS

body {
    background: #1F1F1F;
    color:#fff
}
a {
    color:#fff;
    text-decoration: none;
}
.clear {
    clear: both;
}
section {
    position: relative;
    padding: 50px 0 0;
}
h2 {
    padding-bottom: 50px;
    text-align: center;
}
#photos {
    overflow: hidden;
}
#thumbs {
    padding: 0px 70px;
}
.thumbnail {
    position: relative;
    float: left;
    width: 375px;
    margin: 0px 45px 0px 0px;
}
.thumbnail a {
    display: block;
}
.img {
    margin-bottom: 15px;
    img {
        display: block;
        width: 100%;
        height: auto;
    }
}
.photo-caption {
    strong, span {
        display: block;
    }
}
img {
    display: block;
}
/* Scrollbar */
 .scrollbar {
    position: absolute;
    bottom: 5%;
    left: 70px;
    right: 70px;
    height: 3px;
}
.scrollbar-bg {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 100%;
    background: #3E3E3E none repeat scroll 0% 0%;
}
.scrollbar-handle {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 12.5%;
    height: 100%;
    background: #8F8F8F none repeat scroll 0% 0%;
}

JavaScript

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



// Create scrollbar
if ($(".thumbnail").length >= 3) {
    $("section").after('<div class="scrollbar"><span class="scrollbar-bg" id="sb"><span class="scrollbar-handle" id="sbh" /></span></div>');
}



// Scroll
function move() {
    photos_scroll = $("#photos")[0].scrollWidth - $("#photos").width();
    handler_scroll = $("#sb").width() - $("#sbh").width();
    handler_left = $("#photos").scrollLeft() * handler_scroll / photos_scroll;
    $("#sbh").css({
        left: handler_left
    });
}

$("section").on("mousewheel DOMMouseScroll", function (e) {
    e.preventDefault();

    var delta = e.originalEvent.wheelDelta / 120 || -e.originalEvent.detail; // Chrome || FF

    // Move thumbs
    TweenLite.to($("#photos"), 1.2, {
        scrollLeft: $("#photos").scrollLeft() - parseInt(delta * 35),
        ease: Expo.easeOut,
        overwrite: 5,
        onUpdate: move
    });
});
$(window).on("resize", move);