JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="rowContainer">
        <div class="row rtl">
            <div class="cell">1</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
            <div class="cell">7</div>
            <div class="cell">8</div>
            <div class="cell">9</div>
            <div class="cell">10</div>
            <div class="cell">1</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
            <div class="cell">7</div>
            <div class="cell">8</div>
            <div class="cell">9</div>
            <div class="cell">10</div>    
        </div>
    </div>
    <div class="rowContainer">
        <div class="row ltr">
            <div class="cell">1</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
            <div class="cell">7</div>
            <div class="cell">8</div>
            <div class="cell">9</div>
            <div class="cell">10</div>
            <div class="cell">1</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
            <div class="cell">7</div>
            <div class="cell">8</div>
            <div class="cell">9</div>
            <div class="cell">10</div>    
        </div>
    </div>
    <div class="rowContainer">
        <div class="row rtl">
            <div class="cell">1</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div...

CSS

* {
    margin: 0;
    padding: 0;
}
@-webkit-keyframes scrollRtL {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-50%, 0); }
}
@keyframes scrollRtL {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-50%, 0); }
}
@-webkit-keyframes scrollLtR {
    0% { transform: translate(-50%, 0); }
    100% { transform: translate(0, 0); }
}
@keyframes scrollLtR {
    0% { transform: translate(-50%, 0); }
    100% { transform: translate(0, 0); }
}
html, body, .container {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.rtl {
    -webkit-animation: scrollRtL 5s linear infinite;
    animation: scrollRtL 5s linear infinite;
}
.ltr {
    -webkit-animation: scrollLtR 5s linear infinite;
    animation: scrollLtR 5s linear infinite;
}
.rowContainer {
    position: relative;
    height: 280px;
}
.row {
    position: absolute;
    white-space: nowrap;
    font-size: 0;
}
.cell {
    font-family: verdana;
    display: inline-block;
    font-size: 36px;
    width: 270px;
    height: 270px;
    background-color: red;
    color: white;
    margin: 5px;
}