JSFiddle - React, Tailwind, and code Playground

by Norbert Wilms

HTML

<div id="display" class="disp_div">

</div>

CSS

.disp_div {
  border:2;
  position: relative;  
}
.disp_line {
  height: 12px;
}
.disp_dot {
  position: relative;  
  width: 10px;
  height: 10px;
  background: grey;
  display: inline-block;
  /*padding: 1px; */
  border: 1px;
  border-style: solid;
  border-color: black;
}

JavaScript

$(document).ready(function(){
  for (let y = 0; y < 24; y++) {
    $("#display").append("<div id='disp_line_"+y+"' class='disp_line'><div>");
    for (let x = 0; x < 32; x++) {
      $("#disp_line_"+y).append("<div id='disp_dot_"+x+"'_'"+y+"' class='disp_dot'><div>");
    }
  }

});