JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
		
	</div>

CSS

html {
	height: 100%;
}

body {
	margin: 0;
	height: 100%;
}

.wrapper {
	height: 100%;
	width: 100%;
}

.child {
	background: red;
	display: inline-block;
	vertical-align: top;
}

.child:hover {
	background: blue;
}

JavaScript

function myFunction() {
    var square = prompt("Please enter square size in px");
    var squareSize = parseInt(square);
    if (square != null) {
    	var wrapper = $('.wrapper').width();
    	var wrapperHeight = $('.wrapper').height();
    	var a = (wrapper / squareSize |0) * (wrapperHeight / squareSize |0);	
        var items = wrapper / squareSize |0;
        for (var i = 0; i < a; i++) {
          $('.wrapper').append('<div class="child">' + i +'<div>');
          $('.child').css({
             width: squareSize,
             height: squareSize
         });
      };
}
}

myFunction();