JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main_content">

</div>

CSS

.board_content {
    border: 2px dotted #555;
    border-collapse: collapse;
    border-radius: 10px 10px 0;
    display: table;
    font-size: 1.5rem;
    margin: 0 auto;
}

.row {
    position: relative;
    display: table-row;
  }

.cell {
    display:table-cell;
    border: 2px dashed rgba(0, 0, 0, 0.25);    
    height: 36px;
    padding: 6px 18px;    
    width: 26px;
}

JavaScript

//create board function
$('<div></div>').addClass("board_content").appendTo(".main_content");
    for (var i = 0; i < 7; i++) {
            var row = $('<div></div>').addClass("row").appendTo(".board_content");
            for (var j = 0; j < 7; j++) {
                if (i == 0)
                    row.append("<span class='cell header'></span");
                else
                    row.append("<span class='cell'></span");
            }
        }
        
//return each column elements       
var cols = function(){
var c = $('.row');
for (var i = 0; i < c.length; i++) {
var tmp_array = [];
  for (var j = 0; j < c.length; j++){
    var x = c[j].children[i];
    tmp_array.push(x);
     //x.css({'background': 'rgba(255, 255, 255, 0.3)'});
    //if(x != 0 ){return c;}
  }
  console.log(tmp_array);
}
}
cols();