JSFiddle - React, Tailwind, and code Playground

by kolobok874

HTML

<body>
<div class = "sheet"></div>
</body>

CSS

body {
  background: grey;
}

.sheet {
  background: #fff;
  width: 350px;
  height: 350px;
  display: flex;
  margin:10px auto;
  flex-direction: column;
}

#row {
  display: flex;
  flex: 1;
  height: auto;
}

#grid {
  flex: 1;
  border: 1px solid black;
}

JavaScript

$(function() {
var gridSheet = function(calc) {
	var block = document.createDocumentFragment();
  for (var a = 0; a < calc; a ++) {
  	var $row = $("<div id = 'row'></div>").appendTo(block);
    for (var b = 0; b < calc; b ++) {
    	var $grid =$row.append("<div id = 'grid'></div>");
    }
  }
  return block;
};
$(".sheet").each(function(i, div) {
	var num = 16;
  var html = gridSheet (num);
  $(div).html(html);
});
});