JSFiddle - React, Tailwind, and code Playground

CSS

.square{
  float:left;
  border:1px solid gray;
  margin-left:5px;
  margin-bottom:5px;
  height: 30px;
  width: 30px;
  background-color: #555;
  border-radius: 50%;
 }
 
 .empty-square{
  float:left;
  border:1px solid gray;
  margin-left:5px;
  margin-bottom:5px;
  height: 30px;
  width: 30px;
  background-color: #fff;
  border-radius: 50%;
 }

JavaScript

for(var i = 0; i < 10; i++){
    for(var j = 0; j < 10; j++){
      if ((i == 0 && [0,1].includes(j))) {
        document.write("<div class='empty-square'></div>");
      } else {
        document.write("<div class='square'></div>");
      }
    }
    document.write("<div style='clear:both'></div>");
}