JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<canvas class="bg">
</canvas>

CSS

body
{
    margin:0;
    padding:0;
}
.bg
{
    width:100%;
    height:100%;
}

JavaScript

$(document).ready(function(){
  var ctx =  $(".bg").get(0).getContext("2d");
    
    var bWidth = $(document).width();
    var bHeight = $(document).height();
    
    var subsX = bWidth / 30;
    var subsY = bHeight / 30;
    
    ctx.fillStyle = "rgb(230,230,230)"
    
    for(var r = 0; r < subsY; r++)
    {
        for(var c = 0; c < subsX; c++)
        {
            ctx.fillRect(c*40,r*40,30,30 );
        }
    }
    
});