JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<!-- TODO: Generate puzzle -->
<html>
    <title>Soduku</title>
    <table name="sudokuPuzzle">
		<tr>
			<td><input type="text" name="x0y0">
			<td><input type="text" name="x1y0">
			<td><input type="text" name="x2y0">
			<td><input type="text" name="x3y0">
			<td><input type="text" name="x4y0">
			<td><input type="text" name="x5y0">
			<td><input type="text" name="x6y0">
			<td><input type="text" name="x7y0">
			<td><input type="text" name="x8y0">
		</tr>
		<tr>
			<td><input type="text" name="x0y1">
			<td><input type="text" name="x1y1">
			<td><input type="text" name="x2y1">
			<td><input type="text" name="x3y1">
			<td><input type="text" name="x4y1">
			<td><input type="text" name="x5y1">
			<td><input type="text" name="x6y1">
			<td><input type="text" name="x7y1">
			<td><input type="text" name="x8y1">
		</tr>
		<tr>
			<td><input type="text" name="x0y2">
			<td><input type="text" name="x1y2">
			<td><input type="text" name="x2y2">
			<td><input type="text" name="x3y2">
			<td><input type="text" name="x4y2">
			<td><input type="text" name="x5y2">
			<td><input type="text" name="x6y2">
			<td><input type="text" name="x7y2">
			<td><input type="text" name="x8y2">
		</tr>
		<tr>
			<td><input type="text" name="x0y3">
			<td><input type="text" name="x1y3">
			<td><input type="text" name="x2y3">
			<td><input type="text" name="x3y3">
			<td><input type="text" name="x4y3">
			<td><input type="text" name="x5y3">
			<td><input type="text" name="x6y3">
			<td><input type="text" name="x7y3">
			<td><input type="text" name="x8y3">
		</tr>
		<tr>
			<td><input type="text" name="x0y4">
			<td><input type="text" name="x1y4">
			<td><input type="text" name="x2y4">
			<td><input type="text" name="x3y4">
			<td><input type="text" name="x4y4">
			<td><input type="text" name="x5y4">
			<td><input type="text" name="x6y4">
			<td><input type="text" name="x7y4">
			<td><input type="text" name="x8y4">
		</tr>
		<tr>
			<td><input type="text"...

CSS

table, td {
    border: 1px solid black;
}
td {
    height: 60px;
    width: 60px;
    text-align: center;
}
table {
    border-collapse: collapse;
}
input {
    height: 50px;
    width: 50px;
    border: none;
    text-align: center;
    font-size: 30px;
}

JavaScript

var colVal = [[], [], [], [], [], [], [], [], []];
var rowVal = [[], [], [], [], [], [], [], [], []];
var squareVal = [[], [], [], [], [], [], [], [], []];
// Validate columns
function valCols() {
	for(var a = 0; a < colVal.length; a++) {
		if(areValuesValid(colVal[a]) !== true) {
			return false;
		}
	}
	return true;
}

function valRows() {
	for(var a = 0; a < rowVal.length; a++) {
		if(areValuesValid(rowVal[a]) !== true) {
			return false;
		}
	}
	return true;
}

function valSquares() {
	for(var a = 0; a < squareVal.length; a++) {
		if(areValuesValid(squareVal[a]) !== true) {
			return false;
		}
	}
	return true;
}

function areValuesValid(numArray) {
	for(var i = 0; i < numArray.length; i++) {
		if (!numArray[i] < 10 && !numArray[i] > 0) {
			alert("Invalid input! (Must be between 0 and 10)");
			return false;
		}
		for(var j = 0; j < numArray.length; j++) {
			if (i == j) {
				continue;
			} else if (numArray[i] == numArray[j]) {
				alert("Invalid input! (Each cell's value must be different)");
				return false;
			}
		}
	}
	return true;
}

function getcellVal() {
	// Numbers by column
	colVal  =  [[sudokuPuzzle.x0y0.value, sudokuPuzzle.x0y1.value, sudokuPuzzle.x0y2.value, sudokuPuzzle.x0y3.value, sudokuPuzzle.x0y4.value, sudokuPuzzle.x0y5.value, sudokuPuzzle.x0y6.value, sudokuPuzzle.x0y7.value, sudokuPuzzle.x0y8.value],
				[sudokuPuzzle.x1y0.value, sudokuPuzzle.x1y1.value, sudokuPuzzle.x1y2.value, sudokuPuzzle.x1y3.value, sudokuPuzzle.x1y4.value, sudokuPuzzle.x1y5.value, sudokuPuzzle.x1y6.value, sudokuPuzzle.x1y7.value, sudokuPuzzle.x1y8.value],
				[sudokuPuzzle.x2y0.value, sudokuPuzzle.x2y1.value, sudokuPuzzle.x2y2.value, sudokuPuzzle.x2y3.value, sudokuPuzzle.x2y4.value, sudokuPuzzle.x2y5.value, sudokuPuzzle.x2y6.value, sudokuPuzzle.x2y7.value, sudokuPuzzle.x2y8.value],
				[sudokuPuzzle.x3y0.value, sudokuPuzzle.x3y1.value, sudokuPuzzle.x3y2.value, sudokuPuzzle.x3y3.value, sudokuPuzzle.x3y4.value, sudokuPuzzle.x3y5.value, sudokuPuzzle.x3y6.value,...