JSFiddle - React, Tailwind, and code Playground

HTML

<div class='soWhatAbout' id='aSpecificNumberOfGreyShades'></div>

CSS

div { display:inline; float:left; width:10%; height:15%; font-size:1em; text-align:center; color:#fff; } br { clear:both; } html, body, .soWhatAbout { clear:both; margin:0px; padding:0px; width:100%; height:100%; }

JavaScript

var popular=document.getElementById('aSpecificNumberOfGreyShades'),
    html='',
    apparentlyMagicNumber=50;
for (var shade=1; shade<=apparentlyMagicNumber; shade++){
  var grey = parseInt((200/60)*shade + 30);
  html+='<div style="background-color:rgb('+
      grey+','+grey+','+grey+
      ')">&nbsp;&nbsp;'+(shade<10?'0'+shade:shade)+'&nbsp;&nbsp;</div>'+
      ((1+shade)%10==1?"<br>":"");
}
popular.innerHTML=html;