JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<div id="container">
</div>

CSS

#container {
  background-color: red;
  width: 140px;
  height: 140px;
}
.Cell { 
  float: left; 
  background-color: yellow;
  border-color: green;
  border-style: solid; /* Стиль границы */
  padding: 2px; /* Поля вокруг текста */
  width: 10px;
  height: 10px;
}
.Cell:hover{
  float: left; 
  background-color: yellow;
  border-color: green;
  border-style: solid; /* Стиль границы */
  padding: 3px; /* Поля вокруг текста */
  width: 7px;
  height: 7px;
}

JavaScript

var container = document.getElementById("container");

for( var i = 0; i < 49; i++){
    var cell = document.createElement("div");
    cell.className = "Cell";
    container.appendChild(cell); 
}