JSFiddle - React, Tailwind, and code Playground

HTML

<content>
<div id="ItemPane">
			<div class="PanelContentWrapper">
				<div class="Slot"></div>
				<div class="Slot"></div>
				<div class="Slot"></div>
				<div class="Slot"></div>
				<div class="Slot"></div>
				<div class="Slot"></div>
				<div class="Slot"></div>
				<div class="Slot"></div>
				<div class="Slot"></div>
				<div class="Slot"></div>
				<div class="Slot"></div>
				<div class="Slot"></div>
			</div>
		</div>
</div>
</content>

CSS

content {
	display:flex;
	width:350px;
}
content #ItemPane {
		height:100%;
		background:#a0d4e5;
		padding:1vh;
		border:1px solid blue;
	}
	
		content #ItemPane .PanelContentWrapper {
			width:100%;
			display:flex;
			flex-direction: row;
			flex-wrap:wrap;
			/*align-content:flex-start;*/
		}

			content #ItemPane .Slot {
				width:6vh;
				height:6vh;
				margin:1vh;
				background:black;
			}