JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/lyfeyaj/swipe/swipe.js"></script>


	<style>
		body {
			padding: 0;
			margin: 0;
		}

		.flex {
			display: flex;
			direction: row;
			justify-content: center;
		}

		#myContainer {
			position: relative;
			width: 532px;
			display: inline-block;
			margin: 0 auto;

			padding-left: 16px;
		}

		.swipe {
			visibility: hidden;
			position: relative;
			width: 266px;
			overflow: visible;
		}

		.swipe-wrap {
			position: relative;
		}

		.swipe-wrap>div {
			float: left;

			position: relative;

			overflow: visible;
		}

		.red {
			width: 250px;
			height: 300px;
			background: red;
		}

		.grey {
			width: 250px;
			height: 300px;
			background: grey;
		}

	</style>
</head>

<body>
	<div class="flex">
		<div id="myContainer">
			<div id="mySwipe" class="swipe">
				<div class="swipe-wrap">
					<div><div class="red"></div></div>
					<div><div class="grey"></div></div>
				</div>
			</div>
		</div>

	</div>


<script>
		var element = document.getElementById('mySwipe');


		window.mySwipe = new Swipe(element, {
			startSlide: 0,
			draggable: true,
			autoRestart: false,
			continuous: false,
			disableScroll: true,
			stopPropagation: true,
			callback: function (index, element) { },
			transitionEnd: function (index, element) { }
		});

	</script>
</body>

</html>