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

var ExpandScroll = (function() {

	var maxHeight = 150,
		myScrollers = [];

	function bind() {
		var scrolls = $('.scrolls');

		$.each(scrolls, function(i, value) {
			var self = this,
				imageDiv = $(this).find('.imageDiv'),
				messages = $(this).find('.messages'),
				imageWrapper = $(this).find('.imageWrapper'),
				images = $(this).find('.imageDiv img'),
				width = 0;

			$.each(images, function(index, value){
				width += $(this).width();
			});
			imageWrapper.width(images.first().width());
			messages.width($('body').width()-images.first().width()+1);
			imageDiv.width($('body').width()+(maxHeight*(images.length-1)));

			myScrollers[i] = new iScroll($(this)[0], { 
				hScroll: true, 
				vScroll: false, 
				hScrollbar: false, 
				vScrollbar: false,
				onScrollMove: function(e){
					var x = 0;
					-myScrollers[i].x >= 0 ? x = -myScrollers[i].x : x = 0;
					updateWindow($(self), x);
				},
				onScrolling: function(e) {
					var x = 0;
					-myScrollers[i].x >= 0 ? x = -myScrollers[i].x : x = 0;
					updateWindow($(self), x);
				}
			});

		});
	}

	// Update the window
	function updateWindow(el, x) {

		var x = x,
			width = 0,
			imageDiv = el.find('.imageDiv'),
			messages = el.find('.messages'),
			imageWrapper = el.find('.imageWrapper'),
			images = el.find('.imageDiv img');

		el.find('.imageDiv, .imageDiv img').css({
			height: (x/160)*62.5+87.5 >= maxHeight ? maxHeight : (x/160)*62.5+87.5
		});
		bodyScroll.refresh();
		
		for (var i = 0, l = images.length; i < l; i++) {
			width += $(images[i]).width();
			if (imageWrapper.width() >= width && i !== 0) {
				$(images[i]).addClass('out').css({
					left: (width-$(images[i]).outerWidth(true)) + 'px'
				});
			} else {
				i !== 0 && $(images[i]).removeClass('out').css({
					left: 0
				});
			}
		}
		if (x+images.first().width() <= width) imageWrapper.width(x+images.first().width());
		if (x+images.first().width() > width-$(images[images.length]).width())...