JSFiddle - React, Tailwind, and code Playground

by Anderson Madeira

HTML

<div id="scroller-wrapper">
    <div id="scroller">
        <div class="elem">
            <h1>HELLO WORLD!</h1>
        </div>
        <div class="elem">
            <h1>HELLO WORLD!lçaks dçkfasçld kfaçsldkf çl</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore commodi facilis error, cum inventore eveniet assumenda quas reiciendis ipsa a, molestiae perspiciatis aliquam? Fugiat, ex, ut architecto eaque neque adipisci.</p>
        </div>
        <div class="elem">
            <h1>HELLO WORLD</h1>
        </div>
        <div class="elem">
            <h1>HELLO WORLD!</h1>
        </div>
        <div class="elem">
            <h1>HELLO WORLD!</h1>
        </div>
        <div class="elem">
            <h1>HELLO WORLD!</h1>
        </div>
        <div class="elem">
            <h1>HELLO WORLD!</h1>
        </div>
        <div class="elem">
            <h1>HELLO WORLD!</h1>
        </div>
     </div>
</div>

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#scroller-wrapper {
    width: 100%;
    height: 100%;
    background-color: red;
}

#scroller {
    height: 100%;
    overflow-x: auto;
    white-space: nowrap;
}

.elem {
    display: inline-block;
    outline: 1px solid blue;
}