JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<div>&#9820;</div><div>&#9822;</div><div>&#9821;</div><div>&#9819;</div>
<div>&#9818;</div><div>&#9821;</div><div>&#9822;</div><div>&#9820;</div>
<div>&#9823;</div><div>&#9823;</div><div>&#9823;</div><div>&#9823;</div>
<div>&#9823;</div><div>&#9823;</div><div>&#9823;</div><div>&#9823;</div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div>&#9817;</div><div>&#9817;</div><div>&#9817;</div><div>&#9817;</div>
<div>&#9817;</div><div>&#9817;</div><div>&#9817;</div><div>&#9817;</div>
<div>&#9814;</div><div>&#9816;</div><div>&#9815;</div><div>&#9813;</div>
<div>&#9812;</div><div>&#9815;</div><div>&#9816;</div><div>&#9814;</div>
</div>

CSS

body {
	display:flex;
	margin: 0;
	padding: 0;
	height: 100vh;
}
body>div {
	margin: auto;
	display: grid;
	grid-template-columns: repeat(8,1fr);
	width: 88vmin;
	font-size: 9vmin;
}
div>div {
	aspect-ratio: 1/1;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #1117;
}


div>div:nth-child(odd):nth-child(n):nth-child(-n+7),
div>div:nth-child(even):nth-child(n+9):nth-child(-n+16),
div>div:nth-child(odd):nth-child(n+17):nth-child(-n+24),
div>div:nth-child(even):nth-child(n+25):nth-child(-n+32),
div>div:nth-child(odd):nth-child(n+33):nth-child(-n+40),
div>div:nth-child(even):nth-child(n+41):nth-child(-n+48),
div>div:nth-child(odd):nth-child(n+49):nth-child(-n+56),
div>div:nth-child(even):nth-child(n+57):nth-child(-n+64){background: #eee7;}


/*
div>div:nth-child(odd):is(:nth-child(n):nth-child(-n+7), :nth-child(n+17):nth-child(-n+24), :nth-child(n+33):nth-child(-n+40), :nth-child(n+49):nth-child(-n+56)),
div>div:nth-child(even):is(:nth-child(n+9):nth-child(-n+16), :nth-child(n+25):nth-child(-n+32),:nth-child(n+41):nth-child(-n+48), :nth-child(n+57):nth-child(-n+64)){background: #eee7;}
*/

/*
div>:is(div:nth-child(odd):is(:nth-child(n):nth-child(-n+7), :nth-child(n+17):nth-child(-n+24), :nth-child(n+33):nth-child(-n+40), :nth-child(n+49):nth-child(-n+56)) , div:nth-child(even):is(:nth-child(n+9):nth-child(-n+16), :nth-child(n+25):nth-child(-n+32),:nth-child(n+41):nth-child(-n+48), :nth-child(n+57):nth-child(-n+64))){background: #eee7;}
*/