JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<div>
<img src="https://via.placeholder.com/150?text=1"/><img src="https://via.placeholder.com/150?text=2"/><img src="https://via.placeholder.com/150?text=3"/><img src="https://via.placeholder.com/150?text=4"/><img src="https://via.placeholder.com/150?text=5"/><img src="https://via.placeholder.com/150?text=6"/><img src="https://via.placeholder.com/150?text=7"/><img src="https://via.placeholder.com/150?text=8"/><img src="https://via.placeholder.com/150?text=9"/><img src="https://via.placeholder.com/150?text=10"/><img src="https://via.placeholder.com/150?text=11"/><img src="https://via.placeholder.com/150?text=12"/><img src="https://via.placeholder.com/150?text=13"/><img src="https://via.placeholder.com/150?text=14"/><img src="https://via.placeholder.com/150?text=15"/><img src="https://via.placeholder.com/150?text=16"/><img src="https://via.placeholder.com/150?text=17"/><img src="https://via.placeholder.com/150?text=18"/><img src="https://via.placeholder.com/150?text=19"/><img src="https://via.placeholder.com/150?text=20"/><img src="https://via.placeholder.com/150?text=21"/><img src="https://via.placeholder.com/150?text=22"/><img src="https://via.placeholder.com/150?text=23"/><img src="https://via.placeholder.com/150?text=24"/>
</div>
</div>
CSS
#wrapper {
width:150px;
height:150px;
overflow:hidden;
white-space: nowrap;
}
#wrapper div {
width: auto;
animation: frames 1s linear infinite;
}
@keyframes frames {
0%{transform:translateX(0);}
100%{transform:translateX(-2300%);}}