JSFiddle - React, Tailwind, and code Playground

HTML

<div id="overview">
	<div class="type4"></div>
	<div class="type2"></div>
	<div class="type4"></div>
	<div class="type2"></div>
	<div class="type3"></div>
	<div class="type2"></div>
	<div class="type2"></div>
</div>

CSS

#overview {
	display: inline-block;
	margin: 0em;
	padding: 0em;
	background: green;
}

#overview > div {
	width: 1.5em;
	height: 1.5em;
	display: inline-block;
	margin: 0;
	border-bottom: 2px solid black;
}

div.type1 {
	background: #990099;
}

div.type2 {
	background: #000080;
}
div.type3 {
	background: #734d26;
}

div.type4 {
	background: #990000;
}