JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="list">
	<div class="item"><div class="image"></div></div>
	<div class="item"><div class="image"></div></div>
	<div class="item"><div class="image"></div></div>
	<div class="item"><div class="image"></div></div>
	<div class="item"><div class="image"></div></div>
	<div class="item"><div class="image"></div></div>
	<div class="item"><div class="image"></div></div>
	<div class="item"><div class="image"></div></div>
	<div class="item"><div class="image"></div></div>
	<div class="item"><div class="image"></div></div>
</div>

CSS

body {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #ffff00;

	> div.list {
		display: flex;
		flex-direction: row;
			min-width: 200px;
			height: auto;
	}
		> div.item {
			display: inline-block;
			width: 200px;
			height: 200px;
		}
			> div.image {
				display: inline-block;
			}
				height: 1024px;
				width: 576px;
				background-color: #ff00ff;
				>:nth-child(2) {
				background: #000000;
			}			
		}





}