JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.square {
 position:absolute;
 background-color:silver;   
}
#container {
   position:absolute;left:10px;top:50px;   
}

JavaScript

var resolution = 150;
var pixel = 2;
var nbDiv = resolution * resolution;
 
function show()
{
  var container = document.getElementById("container");
  container.setAttribute("style", "width:" + (resolution * pixel) + "px;height:"  + (resolution * pixel) + "px;");
  
  var start = new Date().getTime();
  var html = [];  
  
  for(var y = 0; y < resolution; y++)
  {
    for(var x = 0; x < resolution; x++)
    {
        //ajout d'un div dans le tableau et même pour un div je fais un tableau que je join, cela est plus rapide que la concaténation de strings
        html.push(['<div class="square" style="left:',
                   x*pixel,'px;top:',
                   y*pixel,'px;width:',
                   pixel,'px;height:',
                   pixel,'px;"></div>'].join(''));
    }
  }
  var endCalcul = (new Date()).getTime() - start;
  
  //remplissage container
  container.innerHTML = html.join('');
  
  
  var end = (new Date()).getTime() - start;
  
  var info = "Res: " + resolution +
             ", pixel: " + pixel +
             ", nbDiv: " + nbDiv +
             ", Délai calcul: " + endCalcul + " ms" +
             ", Délai fonction: " + end + " ms";
  document.getElementById("info").innerHTML = info;
}

show()