JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<div class="wrap">
    <article>
        <div class="scroll a">
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
        </div>
        <div class="scroll b">
            <img class="left" src="http://i61.tinypic.com/2colob6.jpg" alt="" />
        </div>
        <div class="scroll a">
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
        </div>
        <div class="scroll b">
            <img class="right" src="http://i60.tinypic.com/33ddto9.jpg" alt="" />
        </div>
        <div class="scroll a">
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
        </div>
        <div class="scroll b">
            <img class="left" src="http://i61.tinypic.com/2colob6.jpg" alt="" />
        </div>
        <div class="scroll a">
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
            Text Text Text<br/> Text Text Text<br/>
         ...

CSS

div.wrap {
    width:100%;
    height:100%;
}
div.wrap article {
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin:20px;
}
div.wrap article div.scroll {
    overflow:scroll;
    width:33.3333333333%;
    height:33.3333333333%;
    /* height:200px; */
    float:left;
    padding:20px;
}
div.wrap article div.scroll div.content {
    height:100%;
    width:100%;
}
div.wrap article div.scroll img {
    width:auto;
    height:100%;
    position:relative;
}
img.left {
    float:left;
}
img.right {
    float:right;
}


/* demonstration purposes. not important. */
.a {
    background: #ddffa8
}
.b {
    background: #baa8ff
}








/* irrelevent. general stuff. */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-decoration: none;
    color: #000;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
}
figure, figure.thumb, div, img {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
body {
    background: #F7F7F7;
    height:100%;
    width:100%;
    font-size:100%;
    color:#212121;
}

JavaScript

$('div').on('scroll', function () {
    $('div').scrollTop($(this).scrollTop());
});