JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<div id="wrapper">
    <div id="scroller">
        <ul id="thelist">
            <li><strong>1.</strong>  <em>A robot may not injure a human being or, through inaction, allow a human being to come to harm.</em>

            </li>
            <li><strong>2.</strong>  <em>A robot must obey any orders given to it by human beings, except where such orders would conflict with the First Law.</em>

            </li>
            <li><strong>3.</strong>  <em>A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.</em>

            </li>
            <li><strong>Zeroth Law:</strong>  <em>A robot may not harm humanity, or, by inaction, allow humanity to come to harm.</em>

            </li>
            <li><strong>Lyuben Dilov's Forth law:</strong>  <em>A robot must establish its identity as a robot in all cases.</em>

            </li>
            <li><strong>Harry Harrison's Forth law:</strong>  <em>A robot must reproduce. As long as such reproduction does not interfere with the First or Second or Third Law.</em>

            </li>
            <li><strong>Nikola Kesarovski's Fifth law:</strong>  <em>A robot must know it is a robot.</em>

            </li>
        </ul>
    </div>
</div>

CSS

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

body {
	font-size:12px;
	-webkit-user-select:none;
    -webkit-text-size-adjust:none;
	font-family:helvetica;
}
#wrapper {
    width:300px;
    height:160px;
    float:left;
    position:relative;
    /* On older OS versions "position" and "z-index" must be defined, */
    z-index:1;
    /* it seems that recent webkit is less picky and works anyway. */
    overflow:hidden;
    background:#aaa;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
    background:#e3e3e3;
}
#scroller {
    width:2100px;
    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 {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
    display:block;
    float:left;
    width:300px;
    height:160px;
    text-align:center;
    font-family:georgia;
    font-size:18px;
    line-height:140%;
}
#nav {
    width:300px;
    float:left;
}

JavaScript

/*!
 * iScroll v4.2 ~ Copyright (c) 2012 Matteo Spinelli, http://cubiq.org
 * Released under MIT license, http://cubiq.org/license
 */
(function(window, doc){
var m = Math,
	dummyStyle = doc.createElement('div').style,
	vendor = (function () {
		var vendors = 't,webkitT,MozT,msT,OT'.split(','),
			t,
			i = 0,
			l = vendors.length;

		for ( ; i < l; i++ ) {
			t = vendors[i] + 'ransform';
			if ( t in dummyStyle ) {
				return vendors[i].substr(0, vendors[i].length - 1);
			}
		}

		return false;
	})(),
	cssVendor = vendor ? '-' + vendor.toLowerCase() + '-' : '',

	// Style properties
	transform = prefixStyle('transform'),
	transitionProperty = prefixStyle('transitionProperty'),
	transitionDuration = prefixStyle('transitionDuration'),
	transformOrigin = prefixStyle('transformOrigin'),
	transitionTimingFunction = prefixStyle('transitionTimingFunction'),
	transitionDelay = prefixStyle('transitionDelay'),

    // Browser capabilities
	isAndroid = (/android/gi).test(navigator.appVersion),
	isIDevice = (/iphone|ipad/gi).test(navigator.appVersion),
	isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),

    has3d = prefixStyle('perspective') in dummyStyle,
    hasTouch = 'ontouchstart' in window && !isTouchPad,
    hasTransform = !!vendor,
    hasTransitionEnd = prefixStyle('transition') in dummyStyle,

	RESIZE_EV = 'onorientationchange' in window ? 'orientationchange' : 'resize',
	START_EV = hasTouch ? 'touchstart' : 'mousedown',
	MOVE_EV = hasTouch ? 'touchmove' : 'mousemove',
	END_EV = hasTouch ? 'touchend' : 'mouseup',
	CANCEL_EV = hasTouch ? 'touchcancel' : 'mouseup',
	WHEEL_EV = vendor == 'Moz' ? 'DOMMouseScroll' : 'mousewheel',
	TRNEND_EV = (function () {
		if ( vendor === false ) return false;

		var transitionEnd = {
				''			: 'transitionend',
				'webkit'	: 'webkitTransitionEnd',
				'Moz'		: 'transitionend',
				'O'			: 'oTransitionEnd',
				'ms'		: 'MSTransitionEnd'
			};

		return transitionEnd[vendor];
	})(),

	nextFrame = (function() {
		return...