JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "board" class = "grass"></div>
	<div id = "board" class = "grass"></div>
	<div id = "board" class = "grass"></div>
	<div id = "board" class = "grass"></div>
	<div id = "board" class = "grass"></div>
	<div id = "board" class = "grass"></div>
	<br />
	<div id = "board" class = "grass"></div>
	<div id = "board" class = "dirt"></div>
	<div id = "board" class = "grass"></div>
	<div id = "board" class = "grass"></div>
	<div id = "board" class = "dirt"></div>
	<div id = "board" class = "grass"></div>
	<br />
	<div id = "board" class = "grass"></div>
	<div id = "board" class = "grass"></div>
	<div id = "board" class = "grass"></div>
	<div id = "board" class = "grass"></div>
	<div id = "board" class = "dirt"></div>
	<div id = "board" class = "grass"></div>
	<br />
	<div id = "board" class = "dirt"></div>
	<div id = "board" class = "grass"></div>
	<div id = "board" class = "dirt"></div>
	<div id = "board" class = "grass"></div>
	<div id = "board" class = "dirt"></div>
	<div id = "board" class = "grass"></div>
	<br />
	<div id = "board" class = "dirt"></div>
	<div id = "board" class = "dirt"></div>
	<div id = "board" class = "dirt"></div>
	<div id = "board" class = "grass"></div>
	<div id = "board" class = "grass"></div>
	<div id = "board" class = "grass"></div>

CSS

.grass {
	background-color: oliveDrab;
}

.dirt {
	background-color: sandyBrown;
}

div {
   height: 25px;
   width: 25px;
   display: block;
   float: left;
}

br { 
   clear: both; 
}