JSFiddle - React, Tailwind, and code Playground

HTML

<body>


	<div class="wrapper"> 
	
		<input type="button" id="reset" value="Reset"/>	

		<div class ="container"> 
		</div>

	</div>



</body>

CSS

.container{
	background-color: grey;
	margin: 10px auto;

	margin-bottom: 50px;
	width: 660px;
	height: 500;
	position: relative;
	top: 100px;


}

.gridSquare{
	background-color: black;
	display: inline-block;
	vertical-align: top;
}

.wrapper{
	text-align: center;
	background-color: #CC3300;
	width: 860px;
	height: 900px;
	margin: auto;
	border-radius: 15px;
}

#reset{
	width: 200px;
	height: 100px;
	font: sans-serif;
	margin-bottom: 0px;


}

JavaScript

$(document).ready(function(){
	var numSquares = 20;
	var squareSide = 660 / numSquares;


	console.log(squareSide);

	for(var rows = 0; rows < numSquares; rows++){
	$('<div class="gridSquare"></div>').appendTo('.container')
		for(var cols = 0; cols < numSquares; cols++){
			$('<div class="gridSquare"></div>').appendTo('.container')
		}
	}


	$('.container').on('mouseenter', '.gridSquare', function(){
		$(this).css('background-color', 'white');
	});

	$('.gridSquare').width(squareSide);
	$('.gridSquare').height(squareSide);


});