JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html >
    <meta name="viewport" content="width=device-width, initial-scale=1">
<head>
	<style>
        
img {
	max-height:100%;
    max-width: 200pt;
	margin-left: 7.5pt;
	margin-right: 7.5pt;
    scroll-snap-align: center;
    border-radius: 10pt;
}
img:first-child {
	/*padding-left: 15pt;*/
	margin-left: auto;
}
img:last-child {
	/*padding-right: 100pt;*/
	margin-right: auto;
}
.images {
	background: orange;
	padding-left: 30pt;
	padding-right: 30pt;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
	margin-top: 15pt;
	margin-bottom: 15pt;
	height: 200pt;
	display: flex;
	overflow-x: scroll;
}
.images::-webkit-scrollbar {
	display: none;
}
</style>
</head>
<body >
	<div style="min-height: 100%; min-width: 100%;">
		<div class="images">
				<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
				<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
				<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
				<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
				<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
				<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
				<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
				<img...