JSFiddle - React, Tailwind, and code Playground

by iamthestig

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="application/javascript" src="js/iscroll.js"></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;
}

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,
        wheelAction:'scroll',
        lockDirection: true,
        });
}