JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1">

			<div id="div2">
				<div>
					Content2
				</div>
			</div>
			<div id="div3">
				<div>
					Content3
				</div>
			</div>
			<div id="div4">
				<div>
					Content4
				</div>
			</div>
			<div id="div5">
				<div>
					Content5
				</div>
			</div>
			<div id="div6">
				<div>
					Content6
				</div>
			</div>
			<div id="div7">
				<div>
					Content7
				</div>
			</div>
			<div id="div8">
				<div>
					Content8
				</div>
			</div>
			<div id="div9">
				<div>
					Content9
				</div>
			</div>
			<div id="div10">
				<div>
					Content10
				</div>
			</div>
		</div>

CSS

#div1 > div {
				display: inline-block;
				align: center;
				margin: 0% 0, 5%;
				position: relative;
				top: 50%;
			}
			#div1 > div[id] > div {
				transform: translateY(-50%);
				color: white;
				border: 1px dotted yellow;
			}
			#div1 {
				margin: 0px auto;
				width: 620px;
				height: 100px;
				background-color: black;
				overflow: hidden;
				text-align: center;
			}

			#div2 > div, #div10 > div {
				width: 21px;
				height: 100px;
			}

			#div3 > div, #div9 > div {
				width: 60px;
				height: 60px;
			}

			#div4 > div, #div8 > div {
				width: 70px;
				height: 70px;
			}

			#div5 > div, #div7 > div {
				width: 77px;
				height: 77px;
			}

			#div6 > div {
				width: 85px;
				height: 85px;
			}