JSFiddle - React, Tailwind, and code Playground

HTML

<body>


	<div class ="container"> 



	</div>
	
</body>

CSS

.container{
	background-color: grey;
	margin: 0 auto;
	text-align: center;
	font-size: 0;
	margin-bottom: 30px;
	width: 960px;
	height: 960px;
}

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

JavaScript

$(document).ready(function(){
	var squareSide = 960/25;

	

	console.log(squareSide);

	for(var rows = 0; rows < 25; rows++){
	$('<div class="gridSquare"></div>').appendTo('.container')
		for(var cols = 0; cols < 25; cols++){
			$('<div class="gridSquare"></div>').appendTo('.container');
            $('.gridSquare').css({"height": "38.4", "width": "38.4"});
		}
	}

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

});