JSFiddle - React, Tailwind, and code Playground

by egon

HTML

<div id="content">
    <div class="lineup">
        <div id="template" class="stage">
            <div class="page">
                <div class="page-controls">
                    <button>X</button>
                    <button>Y</button>
                    <button>Z</button>
                </div>
                <div class="story">
                     <h1>Title</h1>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem iste illo doloribus harum doloremque quas quam? Aliquid magni, quos hic dolorem debitis molestias molestiae asperiores laudantium illum nulla voluptate temporibus!</p>
                    <p>Eius ex vel quo. Ipsa est vero officiis, libero recusandae, laborum blanditiis quo cum accusantium aliquam quasi nulla sint porro dolorem veniam earum. Magni accusamus, eveniet unde deserunt pariatur harum?</p>
                    <p>Quo suscipit illo, aperiam modi ad hic ex ducimus sapiente voluptate. Quia illo at id doloremque sit, minima, sint debitis aspernatur vero sapiente eveniet ut, assumenda ipsam nostrum incidunt corporis.</p>
                    <p>Laudantium ut libero quasi corrupti suscipit mollitia voluptate numquam temporibus molestiae fugiat totam, reprehenderit iste dignissimos repellendus ex aspernatur exercitationem laborum corporis velit, eos blanditiis? Est facilis molestiae natus voluptas.</p>
                    <p>Nulla sed ad nam fugiat architecto nemo atque, dolor repellendus perferendis corporis! Nihil tempore asperiores maiores eos eum, alias error quidem sed sint laudantium harum quod doloribus nesciunt sunt quaerat?</p>
                    <p>Ex officia, ipsum fugiat illo vero repudiandae ullam itaque. Quibusdam debitis ullam optio! Nostrum expedita alias tempora ducimus praesentium inventore mollitia rerum nesciunt unde quis, minus reprehenderit, adipisci laudantium quam.</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
#nowrap {
    white-space: nowrap;
}
.lineup {
    display: block;
    position: relative;
    white-space: nowrap;
    height: 99%;
}
.lineup .stage {
    position: relative;
    display: inline-block;
    background: #e88;
    width: 33%;
    height: 100%;
    white-space: normal;
    overflow-y: scroll;
}
.lineup .stage .page {
}
.lineup .stage.n2 {
    background: #8e8;
}
.page-controls {
}
.page-controls button {
    height: 32px;
    width: 32px;
    border: 1px solid #eee;
    background: #fff;
}
.page .story {
}

JavaScript

(function () {
    var el = document.getElementById("template");
    window.GLOBAL = el;
    for (var i = 0; i < 5; i++) {
        var cl = el.cloneNode(true);
        if (i % 2 === 0) {
            cl.className += " n2";
        }
        el.parentElement.appendChild(cl);
    }
})();