JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gameArea"></div>

CSS

html { height: 100% }
body{
	width: 100%;
	height: 100%;
}
#gameArea{
	width: 600px;
	height: 600px;
}
#gameArea table{
	width: 100%;
	height: 100%;
}
#gameArea table tr{
	width: 100%;
	height: 12.5%;
}
#gameArea table tr td{
	width: 12.5%;
	height: 12.5%;
	background-color: blue;
}

JavaScript

$(document).ready(function(){
	createGrid(8);
});
var N = 8;
var chess = [
				[0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0]
			];
var count = 0;
var queue =[];
var k=0;
var on=0;
function createGrid(n){
	var gameArea = $("#gameArea");
	var table = $("<table></table>");
	var k=1;
	for(var i=0;i<n;i++){
		var row = $("<tr></tr>");
		for(var j=0;j<n;j++){
			row.append("<td id="+ k + "></td>");
			k++;
		}
		table.append(row);
	}
	gameArea.append(table);
	main();
}
function main() { 
    placeQueen(0);
}
function placeQueen(row){
	for(var i=0;i<N && row<N;i++){
	  chess[row][i] = 1;
	  var temp = row*N+i+1;
	  $('#'+temp).css("background-color","red");
	  if(check(row,i)){
	    if(row==N-1){
	       print();
	    }
	    else{
	      placeQueen(row+1);
	    }
	  }
	  $('#'+temp).css("background-color","blue");
	  chess[row][i]=0;
	}
}
function check(row,col){
	for(var i=row-1;i>=0;i--){
	  if(chess[i][col]==1)
	    return false;
	}
	for(var i=row-1,j=col-1;i>=0 && j>=0;i--,j--){
	  if(chess[i][j]==1)
	    return false;
	}
	for(var i=row-1,j=col+1;i>=0 && j<N;i--,j++){
	  if(chess[i][j]==1)
	    return false;
	}
	return true;
}
function print(){
	console.log("count : " + ++count);
	for(var i=0;i<N;i++){
	  for(var j=0;j<N;j++){
	    console.log(chess[i][j] + " ");
	  }
	  console.log("\n");
	}
	console.log("\n");
}