JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<body>
	<div id="gridContainer"></div>
	<script type="text/javascript" src="HomeScript.js"></script>
</body>

CSS

#gridContainer
		{
			
		}
		.row
		{
			display: block;
		}
		.gridsquare
		{
			width: 25px;
			height: 25px;		
      box-shadow: 0 0 0 1px rgb(175, 216, 248) inset, 0 0 0 1px rgb(175, 216, 248);        
    
            margin-bottom: -4px;
			margin-left: 0px;
			display: inline-block;
		
		}
		.begin
		{
			background-color: purple;
		}
		.end
		{
			background-color: magenta;
		}

JavaScript

function genDivs(rows, cols)
{ 
	var e = document.getElementById("gridContainer");
	for(var r = 0; r < rows; r++)
	{ 
		var row = document.createElement("div"); 
		row.className = "row";
		for(var c = 0; c < cols; c++)
		{ 
			var cell = document.createElement("div"); 
			if(r == 10 && c == 20)
				cell.className = "gridsquare begin";
			else if(r == 10 && c == 40)
				cell.className = "gridsquare end";
		    else
		    	cell.className = "gridsquare"; 
		    row.appendChild(cell); 
		} 
		e.appendChild(row); 
	}
}

genDivs(10, 20);