JSFiddle - React, Tailwind, and code Playground

HTML

<menu><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></menu>

CSS

menu{
		background:green;
		text-align:center;
		line-height: 0;
		margin: 0;
	}

li{
	width:10%;
	max-width: 48px;
	min-width: 30px;
	background: yellow;
	display: inline-block;
	border-radius: 6px;
	border:1px green solid;
}
li:after {
    content: "";
    padding-top: 100%;
    height: 0;
    display: block;
}