JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<title>POC</title>
	<style type="text/css">
		.container {
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-item-align: start;
			outline: none;
			-webkit-overflow-scrolling: touch;
			-ms-overflow-style: none;
			overflow-x: scroll;
			overflow-y: hidden;
			overflow-y: -moz-hidden-unscrollable;
			-ms-scroll-chaining: none;
			-ms-scroll-snap-coordinate: 100vw 0;
			scroll-snap-coordinate: 100vw 0;
			-ms-scroll-snap-destination: 100vw 0;
			scroll-snap-destination: 100vw 0;
			-ms-scroll-snap-points-x: snapInterval(0%, 100%);
			-ms-scroll-snap-points-x: repeat(100vw);
			scroll-snap-points-x: repeat(100vw);
			-ms-scroll-snap-type: mandatory;
			-ms-scroll-snap-type: x mandatory;
			scroll-snap-type: x mandatory;
			scroll-snap-type: mandatory;
			scrollbar-width: none;
			width: 100%;
		}
		.page {
			align-items: center;
			display: flex;
			height: 100%;
			justify-content: center;
			min-width: 100%;
			position: relative;
			scroll-snap-align: start;
			width: 100%;
			box-shadow: inset 0 0 20px #000000;
		}
	</style>
</head>
<body>
	<div class="container" style="height: 359px;">
		<div class="page">
			<h1>1</h1>
		</div>
		<div class="page">
			<h1>2</h1>
		</div>
		<div class="page">
			<h1>3</h1>
		</div>
		<div class="page">
			<h1>4</h1>
		</div>
		<div class="page">
			<h1>5</h1>
		</div>
		<div class="page">
			<h1>6</h1>
		</div>
		<div class="page">
			<h1>7</h1>
		</div>
		<div class="page">
			<h1>8</h1>
		</div>
		<div class="page">
			<h1>9</h1>
		</div>
		<div class="page">
			<h1>10</h1>
		</div>
	</div>
</body>
</html>