JSFiddle - React, Tailwind, and code Playground

by Leo Wattenberg

HTML

<div class="marquee">This is a really long sentence that show scroll because it's larger than it's parent.</div>
<div class="marquee">Small, should not scroll.</div>
<div class="marquee only-twice">2 reps, wrong final position</div>
<div class="marquee no-marquee">No marquee effect</div>

CSS

.marquee {
    width: 20em;
    padding: 0.5em;
    border: 1px solid #ddd;
    white-space: nowrap;
    overflow: hidden;
    overflow-x: -webkit-marquee;
    /*-webkit-marquee: [direction] [increment] [repetition] [style] [speed]*/
    -webkit-marquee: backwards small infinite alternate fast;
}
.only-twice {
    -webkit-marquee-repetition: 2;
}
.no-marquee {
    overflow: hidden;
}