JSFiddle - React, Tailwind, and code Playground

by simpleshadow

HTML

<script src="https://raw.github.com/simpleshadow/iscroll/master/src/iscroll.js"></script>

<div class="navigation"></div>
<div id="content">
	<div class="wrapper">

		<div class="scrolls one">
			<div class="imageDiv">
				<div class="messages">
					<div class="message">
						<div class="time">Now</div>
						<div class="conversation">Wish you were here. We are having such a blast!</div>
					</div>
				</div>
				<div class="imageWrapper">
					<img src="http://placehold.it/150x150/123" />
					<img src="http://placehold.it/150x150/abc" />
					<img src="http://placehold.it/150x150/def" />
					<img src="http://placehold.it/150x150/1de" />
					<img src="http://placehold.it/150x150/123" />
					<img src="http://placehold.it/150x150/abc" />
					<img src="http://placehold.it/150x150/def" />
					<img src="http://placehold.it/150x150/1de" />
				</div> <!-- imageWrapper -->
			</div> <!-- imageDiv -->		
			<div class="names">Bevin</div>
		</div> <!-- scrolls -->
		<div class="scrolls two">
			<div class="imageDiv">
				<div class="messages">
					<div class="message">
						<div class="time">1 min</div>
						<div class="conversation">Check out our puppy! His name is Gus. Cute!</div>
					</div>
				</div>
				<div class="imageWrapper">
					<img src="http://placehold.it/150x150/123" />
					<img src="http://placehold.it/150x150/abc" />
					<img src="http://placehold.it/150x150/def" />
					<img src="http://placehold.it/150x150/1de" />
					<img src="http://placehold.it/150x150/123" />
					<img src="http://placehold.it/150x150/abc" />
					<img src="http://placehold.it/150x150/def" />
					<img src="http://placehold.it/150x150/1de" />
				</div> <!-- imageWrapper -->
			</div> <!-- imageDiv -->
			<div class="names">Corey</div>
		</div> <!-- scrolls -->
		<div class="scrolls three">
			<div class="imageDiv">
				<div class="messages">
					<div class="message">
						<div class="time">1 hr</div>
						<div class="conversation">The hike was great. I’m glad you...

CSS

@font-face {
	font-family: 'open_sans';
	src: url('fonts/OpenSans-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'open_sans';
	src: url('fonts/OpenSans-Semibold.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'open_sans';
	src: url('fonts/OpenSans-Extrabold.ttf') format('truetype');
	font-weight: bolder;
	font-style: normal;
}
@font-face {
	font-family: 'open_sans';
	src: url('fonts/OpenSans-Light.ttf') format('truetype');
	font-weight: 200;
	font-style: normal;
}
@font-face {
	font-family: 'open_sans';
	src: url('fonts/OpenSans-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
* { font-family: open_sans, Arial; }

html, body {
	background: #e0e0e0;
	-webkit-font-smoothing: antialiased;
	color: #424242;
	font-smooth:auto;
	font-size: 16px;
	margin: 0px;
}

.navigation {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 45px;
	background-color: #27a6d5;
	-webkit-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, .4);
	z-index: 9000;
}

#content {
	position: absolute;
	overflow: auto;
	width: 100%;
	top: 45px;
	bottom: 0;
	left: 0;
}

.wrapper { 
	background:#EFEFEF; 
	margin: auto; 
	position: relative;
	overflow: auto;
	/*border-top: #e0e0e0 solid 1px;*/
	border-bottom: 1px #e0e0e0 solid;
}

.scrolls { 
	position: relative;
	overflow-x: scroll;
	overflow-y: hidden;
	background-color: #fff;
	border-bottom: 1px #e0e0e0 solid;
}

.imageDiv { 
	position: relative;
	height: 88px;
	width: 1370px;
	margin: 0;
	overflow: hidden;
	-webkit-transform: translate3d(0, 0, 0);
}

.messages {
	float: left;
	height: 88px;
}
	.names {
		position: absolute;
		background-color: #ffffff;
		top: 5px;
		left: 0px;
		padding: 5px 8px 5px 15px;
		font-weight: bold;
	}
	.message {
		height: 100%;
	}
	.message .time {
		position: relative;
		top: 13px;
		right: 10px;
		font-size: 12px;
		color: #b2b1b1;
		text-align: right;
		padding-right: 13px;
	}
	.message...

JavaScript

/*!
 * iScroll v4.2.6 ~ 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 !== false,
    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',
	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 window.requestAnimationFrame...