JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
     <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <script type="text/javascript" src="https://raw.github.com/siberex/iscroll/408969b05c1d3fa041392dc40b0165076e66e7c9/src/iscroll.js"></script>
        <script type="text/javascript">
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
        document.addEventListener('DOMContentLoaded', loaded, false);
        document.documentElement.style.overflowX = 'hidden';
        document.documentElement.style.overflowY = 'hidden';
        
        var myScroll;
        function loaded() {
            myScroll = new iScroll('wrapper', {
                hideScrollbar: true,
                fadeScrollbar: true,
                wheelHorizontal: true,
                lockDirection: true,
                scrollbarClass: 'myScrollbar',
                });
        }
        </script>
     </head>

    <body>
          <div id="wrapper">
            <div id="scroller">
               <ul id="thelist">
                         <li id="panel-1">THIS IS A PANEL</li>
                         <li id="panel-2">THIS IS A PANEL</li>
                         <li id="panel-3">THIS IS A PANEL</li>
                         <li id="panel-4">THIS IS A PANEL</li>
                         <li id="panel-5">THIS IS A PANEL</li>
                    </ul>
               </div>
          </div>
     </body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    height: 100%;
    border: 0;
    font-size: 0;
}

body,ul,li {
    padding:0;
    margin:0;
}

body {
    font-size:12px;
    -webkit-user-select:none;
    -webkit-text-size-adjust:none;
    /*    -webkit-box-sizing:border-box;*/
    font-family:helvetica;
    /*    padding-bottom:45px;    /*    This prevents the scroller to lock if the user swipes down outside of the screen.
                                NOT needed if in home screen mode. */
}

#wrapper {
    position:absolute; z-index:1;
    top:0; bottom:0; left:0;
    width:100%;
    background:#000;
    overflow:auto;
}

#scroller {
    width:8000px;
    height:100%;
    float:left;
    padding:0;
}

#scroller ul {
    list-style:none;
    display:block;
    float:left;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    text-align:left;
}

#scroller li {
    display:block;
    vertical-align:middle;
    float:left;
    width: 1600px;
    padding:0;
    height:100%;
    background-color:#000000;
    font-size:14px;
}

#scroller li img {
    height: 100%;
}

#panel-1 {
    background: url(http://i978.photobucket.com/albums/ae265/horizoncars/lambo-cover.jpg) center bottom no-repeat;
}

#panel-2 {
    background: url(http://i978.photobucket.com/albums/ae265/horizoncars/lambo-left-1.jpg) center bottom no-repeat;
}

#panel-3 {
    background: url(http://i978.photobucket.com/albums/ae265/horizoncars/lambo-left-2.jpg) center bottom no-repeat;
}

#panel-4 {
    background: url(http://i978.photobucket.com/albums/ae265/horizoncars/lambo-right-1.jpg) center bottom no-repeat;
}

#panel-5 {
    background: url(http://i978.photobucket.com/albums/ae265/horizoncars/lambo-right-2.jpg) center bottom no-repeat;
}

.myScrollbarH {
    position:absolute;
    z-index:100;
    height:5px;
    bottom:5px;
    left:2px;
    right:7px
}

.myScrollbarH > div {
    position:absolute;
    z-index:100;
    height:100%;

    /* The following is probably what you want to customize */
 ...