JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
</ul>

CSS

body {padding: 50px; background: white;}

ul {
	padding: 0px;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	background: grey;
	outline: 1px solid white;
	outline-offset: -1px;
	max-width: 800px;
	margin: auto;
}

li {
	padding: 100px 0px;
	text-align: center;
	background: white;
	margin: 0px 1px 1px 0px;
	flex: 1 220px;
}