JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<style>
body {
    background: #333;
    color: #fff;
}
.the_grid, .the_grid td {
	border: solid thin grey;
}
.the_grid {
	border-collapse: collapse;
	border-width: 2px;
}
.the_grid input {
	font-family: Terminal, Tahoma;
	font-size: 14pt;
	width: 20px;
	padding: 3px;
	text-align: center;
	border-style: none;
}	
.puzzle_form {
	font-family: Tahoma;
	color: whitesmoke;
	width: 250px;
	padding: 8px;
}
.puzzle_options, .puzzle_options input, .puzzle_options button {
	font-family: Tahoma;
	font-size: 8pt;
}
.puzzle_options input {
	width: 20px;
	background-color: #50d050;
	border-style: none;
}
.puzzle_options button {
	width: 57px;
	padding-bottom: 2px;
	border-style: solid;
	border-width: thin;
	border-color: #309030;
	background-color: #005030;
	color: whitesmoke;
	outline: 0;
}
.the_title {
	font-size: 13pt;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 4px;
}
#status_message {
	font-size: 10pt;
	color: yellow;
	text-align: center;
	height: 30px;
}</style>
</head>
<body>
<form name="puzzle_form" class="puzzle_form">
	<p class="the_title">Sudoku</p>
	
   <table class="the_grid" id="the_grid" rows="11" cols="11" cellspacing="0" cellpadding="0">
    </table>    
    
	<table class="puzzle_options" rows="6" cols="5">
		<tr>
			<td colspan="5" id="status_message"></td>
		</tr><tr>
			<td colspan="5"><u>Digits shown in a 3x3 box:</u></td>
		</tr><tr>
			<td>Min:<br /><input type="text" name="cells_min" value="2" maxlength="1" /></td>
			<td>Max:<br /><input type="text" name="cells_max" value="5" maxlength="1" /></td>
			<td /><td /><td style="vertical-align:bottom">
				<button type="button" onclick="javascript:clearPuzzle()">Clear</button></td>
		</tr><tr style="height:10px">
		</tr><tr>
			<td colspan="2"><button type="button" onclick="javascript:findPuzzle()">New</button></td>
			<td><button type="button" onclick="javascript:clearBlankCells()">Reset</button></td>
			<td><button type="button"...