JSFiddle - React, Tailwind, and code Playground

HTML

<html>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Home Page</title>
		<link rel="stylesheet" href="assets/css/bootstrap.css" type="text/css" />
		<link rel="stylesheet" href="assets/css/font-awesome.css" type="text/css" />
		<link rel="stylesheet" href="assets/css/gxcpl.css" type="text/css" />
	</head>
	<body>
		<div class="scrolling-wrapper">
			<div class="card"><h2>Card #1</h2></div>
			<div class="card"><h2>Card #2</h2></div>
			<div class="card"><h2>Card #3</h2></div>
			<div class="card"><h2>Card #4</h2></div>
			<div class="card"><h2>Card #5</h2></div>
			<div class="card"><h2>Card #6</h2></div>
			<div class="card"><h2>Card #7</h2></div>
			<div class="card"><h2>Card #8</h2></div>
			<div class="card"><h2>Card #9</h2></div>
			<div class="card"><h2>Card #10</h2></div>
		</div>
	</body>
</html>

CSS

html, body{
  height: 100%;
}

body { 
	margin: 0px;
	padding: 0px;
	background-image: url(https://thumbs.dreamstime.com/b/wood-wall-brick-floor-your-home-background-wallpaper-48559258.jpg) ;
	background-position: center center;
	background-repeat:  no-repeat;
	background-attachment: fixed;
	background-size:  cover;
	background-color: #999;
}

.scrolling-wrapper {
  height: 100%;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
  /* cursor: ew-resize; 
  position: absolute;
  bottom: 0px; 
  left: 0px;*/
  display: flex; 
  align-items: center;
}
.scrolling-wrapper > .card {
	display: inline-flex;
  padding:20px;
  margin:10px;
	width: 200px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	border: 5px solid #f00;
}
.scrolling-wrapper::-webkit-scrollbar {
  display: none;
}