JSFiddle - React, Tailwind, and code Playground

by Станислав Некрасов

HTML

<div class="board">
  <div class="line l1">
    <div class="cell c1"></div>
    <div class="cell c2"></div>
    <div class="cell c3"></div>
    <div class="cell c4"></div>
    <div class="cell c5"></div>
    <div class="cell c6"></div>
    <div class="cell c7"></div>
    <div class="cell c8"></div>
    <div class="cell c9"></div>
    <div class="cell c10"></div>
  </div>
  <div class="line l2">
    <div class="cell c1"></div>
    <div class="cell c2"></div>
    <div class="cell c3"></div>
    <div class="cell c4"></div>
    <div class="cell c5"></div>
    <div class="cell c6"></div>
    <div class="cell c7"></div>
    <div class="cell c8"></div>
    <div class="cell c9"></div>
    <div class="cell c10"></div>
  </div>
  <div class="line l3">
    <div class="cell c1"></div>
    <div class="cell c2"></div>
    <div class="cell c3"></div>
    <div class="cell c4"></div>
    <div class="cell c5"></div>
    <div class="cell c6"></div>
    <div class="cell c7"></div>
    <div class="cell c8"></div>
    <div class="cell c9"></div>
    <div class="cell c10"></div>
  </div>
  <div class="line l4">
    <div class="cell c1"></div>
    <div class="cell c2"></div>
    <div class="cell c3"></div>
    <div class="cell c4"></div>
    <div class="cell c5"></div>
    <div class="cell c6"></div>
    <div class="cell c7"></div>
    <div class="cell c8"></div>
    <div class="cell c9"></div>
    <div class="cell c10"></div>
  </div>
  <div class="line l5">
    <div class="cell c1"></div>
    <div class="cell c2"></div>
    <div class="cell c3"></div>
    <div class="cell c4"></div>
    <div class="cell c5"></div>
    <div class="cell c6"></div>
    <div class="cell c7"></div>
    <div class="cell c8"></div>
    <div class="cell c9"></div>
    <div class="cell c10"></div>
  </div>
  <div class="line l6">
    <div class="cell c1"></div>
    <div class="cell c2"></div>
    <div class="cell c3"></div>
    <div class="cell c4"></div>
    <div class="cell c5"></div>
    <div class="cell...

CSS

.board {
  display: flex;
  flex-direction: column;
}

.line {
  display: flex;
}

.cell {
  width: 40px;
  height: 40px;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  font-family: Arial, sans-serif;
}

JavaScript

document.querySelectorAll('.cell').forEach(cell => {
	cell.innerHTML = '1';	
})