JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<div id="window">
    <div id="scrollable">
        <div id="lipsum">
            <img id="my-image" src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" alt="hero" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed dictum turpis. Fusce luctus vestibulum turpis, vel interdum neque pretium in. Morbi porttitor tempus hendrerit. Sed neque metus, tempus et odio venenatis, rhoncus facilisis arcu. Vestibulum efficitur turpis sit amet erat eleifend vestibulum nec eu ex. Maecenas tristique tellus ipsum, sed aliquet tortor bibendum ut. Praesent sollicitudin, purus ut porttitor sollicitudin, sapien urna tempus metus, quis malesuada metus purus vitae nibh. Quisque fermentum scelerisque elementum. Proin pretium arcu sit amet sapien ullamcorper finibus. Quisque convallis mollis tempus. Ut tincidunt libero et ligula vulputate sodales. Nam ac consequat tortor.</p>
            <p>Etiam quis luctus nisi, vel dictum ligula. Phasellus felis magna, placerat sit amet facilisis ut, pharetra vel nisl. Sed imperdiet varius accumsan. Quisque tincidunt pretium scelerisque. Sed blandit ac massa id auctor. In massa magna, auctor quis consequat non, lacinia tincidunt elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut luctus, arcu auctor fermentum semper, lectus ipsum iaculis justo, eget pretium nisl dui at sem.</p>
            <p>Fusce dolor eros, sodales vel mauris a, commodo ultricies lacus. In sed tortor quis mauris tincidunt lobortis ac at massa. Pellentesque in sapien vel leo hendrerit efficitur vitae ut ex. Nulla condimentum faucibus pulvinar. Proin mattis rutrum est at cursus. Nulla et dui eu purus bibendum tincidunt et id mi. Nam vulputate mi vel nisl dignissim ullamcorper. Morbi quis tempus nisl. Aliquam erat volutpat. Ut in eleifend nisl. Sed commodo porttitor sem eu aliquet. In elementum dignissim tempor. Vivamus vel gravida velit. Sed id sem non diam pellentesque...

CSS

img {
    float:left;
    padding:0 10px 10px 0;
}
#scrollable, #window {
    position:absolute;
    left:0;
    top:0;
}
#scrollable {
    background:rgba(255, 0, 0, 0.2);
    height:200px;
    overflow-x:scroll;
    white-space:nowrap;
}
#window {
    background:#999;
    height:500px;
    overflow:hidden;
    width: 200px     
}

JavaScript

/* Sets #scrollable width randomly between 200 and 1000. Not needed. */
function randomBetween(min, max) {
    return Math.floor(Math.random()*(max-min+1)+min);
}
document.getElementById("scrollable").style.width = randomBetween(200, 500) + "px";