JSFiddle - React, Tailwind, and code Playground

HTML

<ul><li> </li><li> </li><li> </li><li> </li><li> </li></ul>

CSS

html {
	display: table
}
body {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-size: 1em
}
ul {
	list-style-type: none;
	width: 20em;
	margin: 0 auto;
	color: rgb(255, 255, 255)
}
li {
	position: relative;
	display: inline-block;
	width: 5em;
	height: 5em;
	line-height: 5em;
	border-radius: 5em;
	margin-left: 0.5em;
	box-shadow: 0em 0em 0em 0.1em rgb(255, 255, 255), inset 0em 0em 0em 0.1em rgb(255, 255, 255)
}
li:nth-of-type(1) {
	border: 0.5em solid rgb(0, 133, 199);
	margin-left: 0
}
li:nth-of-type(2) {
	border: 0.5em solid rgb(0, 0, 0)
}
li:nth-of-type(3) {
	border: 0.5em solid rgb(223, 0, 36)
}
li:nth-of-type(3) {
	border: 0.5em solid rgb(223, 0, 36)
}
li:nth-of-type(4) {
	border: 0.5em solid rgb(244, 195, 0);
	top: -3em;
	margin-left: 0
}
li:nth-of-type(5) {
	border: 0.5em solid rgb(0, 159, 61);
	top: -3em
}