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: 50%;
	height: 50%;
}
#gameArea table tr{
	width: 100%;
	height: 12.5%;
}
#gameArea table tr td{
	width: 12.5%;
	height: 12.5%;
	background-color: blue;
}

JavaScript

var N = 8;
var solutionArray = [];
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 simulate(arr){
	for(var i=0;i<N;i++){
	  for(var j=0;j<N;j++){
	  	if(arr[i][j]==1)
	    	$('#'+(i*N+j+1)).css("background-color","red");
	  }
	}
}
function removeSimulation(arr){
	for(var i=0;i<N;i++){
	  for(var j=0;j<N;j++){
	    	$('#'+(i*N+j+1)).css("background-color","blue");
	  }
	}
}
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 placeQueen(row){
	for(var i=0;i<N && row<N;i++){
	  on++;
	  chess[row][i] = 1;
	  var temp = row*8+i+1;
	  if(check(row,i)){
	    if(row==N-1){
	      var tempArray = JSON.parse(JSON.stringify(chess));
	      solutionArray.push(tempArray);
	    }
	    else{
	      placeQueen(row+1);
	    }
	  }
	  chess[row][i]=0;
	}
}
function main() { 
    placeQueen(0);
    var counter=0;
    var myVar = setInterval(function(){ 
    	simulate(solutionArray[counter++]);
    	if(counter>=92){
    		clearInterval(myVar);
    	}
    	setTimeout(function(){
    		removeSimulation(solutionArray[counter]);
    	},600);
    }, 1000);
}
$(document).ready(function(){
	createGrid(8);
});