JSFiddle - React, Tailwind, and code Playground

by Alex Str

HTML

<div class="wrapper">
    <div class="scroll-wrapper">
        <div class="scroll">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab voluptatibus quidem accusantium recusandae porro expedita id consequatur fuga omnis perspiciatis beatae sequi iusto quasi tenetur culpa amet deserunt nobis!</p>
        </div>
        <div class="scroll">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab voluptatibus quidem accusantium recusandae porro expedita id consequatur fuga omnis perspiciatis beatae sequi iusto quasi tenetur culpa amet deserunt nobis!</p>
        </div>
        <div class="scroll">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab voluptatibus quidem accusantium recusandae porro expedita id consequatur fuga omnis perspiciatis beatae sequi iusto quasi tenetur culpa amet deserunt nobis!</p>
        </div>
        <div class="scroll">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab voluptatibus quidem accusantium recusandae porro expedita id consequatur fuga omnis perspiciatis beatae sequi iusto quasi tenetur culpa amet deserunt nobis!</p>
        </div>
        <div class="scroll">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab voluptatibus quidem accusantium recusandae porro expedita id consequatur fuga omnis perspiciatis beatae sequi iusto quasi tenetur culpa amet deserunt nobis!</p>
        </div>
        <div class="scroll">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab voluptatibus quidem accusantium recusandae porro expedita id consequatur fuga omnis perspiciatis beatae sequi iusto quasi tenetur culpa amet deserunt nobis!</p>
        </div>
        <div class="scroll">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab voluptatibus quidem accusantium recusandae porro expedita id consequatur fuga omnis perspiciatis beatae sequi iusto quasi...

CSS

* {
    margin: 0;
    padding: 0;
}
.wrapper {
    width: 500px;
    margin: 0 auto;
    height: 200px;
    overflow-x: scroll;
    overflow-y: hidden;
}
.scroll-wrapper {
    width: 1750px;
   
    height: 200px;
}
.scroll {
    width: 250px;
    float: left;
    height: 200px;
}