JSFiddle - React, Tailwind, and code Playground

HTML

<section class="scroll">
		    <ol>
			    <li class="card">
				    <a href="#">
					
					<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg" />
					
					</a>
					
					<p class="castname"><a href="#">Aamir Khan</a></p>
					
				</li>
		
				
				<li class="card">
				    <a href="#">
					
					<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
					
					</a>
					
					<p class="castname"><a href="#">Aamir Khan</a></p>
					
				</li>
				
				<li class="card">
				    <a href="#">
					
					<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
					
					</a>
					
					<p class="castname"><a href="#">Aamir Khan</a></p>
					
				</li>
				
				<li class="card">
				    <a href="#">
					
					<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
					
					</a>
					
					<p class="castname"><a href="#">Aamir Khan</a></p>
					
				</li>
				
				<li class="card">
				    <a href="#">
					
					<img src="https://image.tmdb.org/t/p/w240_and_h266_bestv2/jYohlUVkLPFdnDryZ8V1HZkJzDt.jpg"/>
					
					</a>
					
					<p class="castname"><a href="#">Aamir Khan</a></p>
					
				</li>
		
	
	        </ol>
	
	
	</section>
  
  
  </div>

CSS

body {
  max-width:400px;
}

.scroll {
  overflow: auto;
  white-space: nowrap;
}
ol {
  padding-left: 0;
}
.card {
display:inline-block;
width:240px;
	list-style-type:none;
}