JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="inner">
        <div class="secondary"></div>
        <div class="secondary"></div>
        <div class="secondary"></div>
        <div class="secondary"></div>
        <div class="secondary"></div>
        <div class="secondary"></div>
        <div class="secondary"></div>
        <div class="secondary"></div>
        <div class="primary"></div>
        <div class="secondary"></div>
        <div class="secondary"></div>
        <div class="secondary"></div>
        <div class="secondary"></div>
        <div class="secondary"></div>
        <div class="secondary"></div>
        <div class="secondary"></div>
        <div class="secondary"></div>
    </div>
</div>

CSS

#main { 
    background: gray;
    width: 530px;
    height: 200px;
    overflow: hidden;
    position: relative;
}
#inner {
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 0;
}

.secondary, .primary {
    display: inline-block;
    vertical-align: middle;
    margin: 10px;
}
.secondary {
    background: #009;
    width: 50px;
    height: 50px;
}
.primary {
    background: #900;
    width: 300px;
    height: 300px;
}

JavaScript

var getEl = function(str) {
    return document.getElementById(str);
};
var addEvent = function(elem, type, handler) {
    elem.addEventListener(type, handler, true);
};
var removeEvent = function(elem, type, handler) {
    elem.removeEventListener(type, handler, true);
};
var isChild = function(el, ch, flag) {
    var elements = el.getElementsByTagName('*');
    for (var i = 0, l = elements.length; i < l; i++) {
        if (elements[i] === ch) {
            return true;
        }
    }
    return (flag) ? el === ch : false;
};

var slideX = function(container, inner) {
    var that = this,
        startX = null,
        tX = null,
        tY = null,
        tXend = null,
        tYend = null,
        move = null;

    var startSlide = function(e) {
        if (e.touches.length == 1 && isChild(container, e.target, true)) {
            var touch = e.touches[0];
            startX = touch.pageX + container.scrollLeft;
            tX = touch.pageX;
            tY = touch.pageY;

            addEvent(window, 'touchmove', moveSlide);
            addEvent(window, 'touchend', stopSlide);
        }
    };
    var moveSlide = function(e) {
        if (e.touches.length == 1) {
            var touch = e.touches[0];

            tXend = touch.pageX;
            tYend = touch.pageY;

            if (!move) {
                move = (Math.abs(tY - tYend) < Math.abs(tX - tXend)) ? 'x' : 'y';
            }

            if (move == 'x') {
                e.preventDefault();
                var x = touch.pageX - startX;
                if (x <= 0 && x >= -(inner.offsetWidth - container.offsetWidth)) {
                    container.scrollLeft = -x;
                } else {
                    startX = touch.pageX + container.scrollLeft;
                }
            }
        }
    };
    var stopSlide = function(e) {
        move = null;
        removeEvent(window, 'touchmove', moveSlide);
        removeEvent(window, 'touchend', stopSlide);
    };

    var init = that.init =...