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">

		<section id="conversations">
            <div class="wrapper">
                
                <div class="conversation">
                    <div class="metadata">
                        <div class="names">Bevin</div>
                        <div class="time">Yesterday</div>
                    </div>
                    <div class="messages">
                        <p class="message">Goodnight!</p>
                        <p class="message">Hope you two have fun tomorrow.</p>
                    </div>
                </div>
                
                <div class="conversation">
                    <div class="metadata">
                        <div class="names">Me</div>
                        <div class="time">2.5 hrs</div>
                    </div>
                    <div class="messages">
                        <div class="message">We miss you two. Remember this? :P</div>
                    </div>
                </div>
                
                <div class="conversation">
                    <div class="metadata">
                        <div class="names">Bevin</div>
                        <div class="time">2 hrs</div>
                    </div>
                    <div class="messages">
                        <div class="message">Jenae and Adam just got here. How's San Diego?</div>
                    </div>
                </div>
                
                <div class="conversation">
                    <div class="metadata">
                        <div class="names">Me</div>
                        <div class="time">1 min</div>
                    </div>
                    <div class="messages">
                        <div class="message">This is the view from our hotel. How's the party?</div>
                    </div>
                </div>
                
                <div...

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;
}

.conversation:not(:last-child) {
    border-bottom: 1px #e0e0e0 solid;
}

.wrapper { 
	margin: auto; 
	position: relative;
	border-top: #e0e0e0 solid 1px;
	border-bottom: 1px #e0e0e0 solid;
}

#conversations {
    display: block;
    position: absolute;
    top: 0;
    right: 125px;
    bottom: 0;
    left: 0;
    z-index: 10;
    overflow: visible !important;
}

.conversation {
    position: relative; 
    background: #fff;
    min-height: 75px;
    padding: 15px;
}
.conversation:last-child {
    min-height: 95px;
}
    .metadata{
        display: block;
        position: relative;
        height: 18px;
    }
        .names {
            position: absolute;
		    font-weight: bold;
        }
        .time {
            position: absolute;
            right: 0;
            font-size: 12px;
           ...

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())...