JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Le jeu de la vie2</title>
		<link rel="stylesheet" href="style2.css" />
    </head>
 
    <body>
		<div id='table'>
		</div>
		<div id="instructions">
			<div id="lgth_or_nbr">
				<p>
					Voulez-vous choisir le nombre de cellules ou bien leur taille (en pixel) ? Sachez que quoiqu'il en soit, le tableau occupera tout l'espace encadré
					sur la gauche. De plus, ce jeu n'est pas adapté au changement de taille d'écran donc si vous voulez voir ce que ça fait, c'est à vos risques et périls ! 
				</p>
				<button id="choice_lgth">Je choisis la taille des cellules</button>
				<button id="choice_nbr">Je choisis le nombre de cellules</button>
			</div>
			
			<div id="lgth">
				<p>
					Quelle taille en pixel voulez-vous ? (n'afficher que la valeur, pas l'unité)
				</p>
				<form name="lgth">
					<p>
						<label>Horizontalement</label> : <input  type="text" name="horizon"/>
						<label>Verticalement</label> : <input type="text" name="verti"/>
					</p>
				</form>
				<button class="view">Visualiser</button>
				<button class="validate">Valider</button>
			</div>
			
			<div id="nbr">
				<p>
					Combien de cellules voulez-vous ?
				</p>
				<form name="nbr">
					<p>
						<label>Horizontalement</label> : <input  type="text" name="horizon"/>
						<label>Verticalement</label> : <input type="text" name="verti"/>
					</p>
				</form>
				<button class="view">Visualiser</button>
				<button class="validate">Valider</button>
			</div>
			
			<div id="mode">
				<p>
					Quel mode de jeu voulez-vous choisir ? Celui où vous décidez qui vit et qui ne vit pas ? Ou bien celui où vous ne choississez que le taux de population ?
				</p>
				<button id="manual">Manuel</button>
				<button id="rate">Taux</button>
			</div>
			
			<div id="random">
				<p>
					Choisissez le taux de population :
				</p>
				<button id="weak">Faiblement peuplé : 25%</button>
				<button...

CSS

body
{
	margin : 0;
	padding : 0;
}

table
{
    border: 1px solid #000;
	border-collapse : collapse;
}

td 
{
    width: 4px;
    height: 4px;
    border: 0 solid #ccc;
    background: red;
}

 td.alive
{
    background: #000;
}

#instructions
{
	position : absolute;
	width : 280px;
	top : 0px;
	right : 5px;
}

#table
{
	border : 1px black solid;
}

#lgth
{
	display : none;
}

#nbr
{
	display : none;
}

#mode
{
	display : none;
}

#random
{
	display : none;
}

#game
{
	display : none;
}

JavaScript

function addEvent(element,event,func,bool)
{
	bool=bool||true;
	element.addEventListener? element.addEventListener(event,func,bool):element.attachEvent('on'+event,func);/*P.A.N./F.O.B.*/
}

/*crée une matrice à line ligne, col colonnes et dont chaque case à la valeur value*/
function makeMatrix(line,col,value)
{
	var tab=new Array(line);
	
	for(var i=0;i<line;i++)
	{
		tab[i]=new Array(col);
		for(var j=0;j<col;j++)
		{
			tab[i][j]=value;
		}
	}
	
	return tab;
}

function choiceFunction()
{
	string=this.id;
	choice=string.substring(7,string.length);
	document.getElementById("lgth_or_nbr").style.display="none";
	document.getElementById(choice).style.display="inline";
}


function view()
{
	var form=document.forms[choice];
	horizontal=parseInt(form.horizon.value);
	vertical=parseInt(form.verti.value);
	if( isNaN(horizontal) || isNaN(vertical) || horizontal<=0 || vertical<=0)
	{
		alert("Merci de mettre des nombres positifs");
		form.horizon.value="";
		form.verti.value="";
	}
	else
	{
		if(choice==="nbr")
		{
			nbr_cell_hor=horizontal;
			nbr_cell_vert=vertical;
			lgth_hor=Math.floor((wdth-nbr_cell_hor-3)/nbr_cell_hor);
			lgth_vert=Math.floor((hght-nbr_cell_vert-3)/nbr_cell_vert);
		}
		else
		{
			lgth_hor=horizontal;
			lgth_vert=vertical;
			nbr_cell_hor=Math.floor(wdth/lgth_hor);
			nbr_cell_vert=Math.floor(hght/lgth_vert);
		}
		tab_js=makeMatrix(nbr_cell_vert+2,nbr_cell_hor,false);
		firstMatrixJsInHtml(tab_js, 'table');
	}
	
}

/*******************************************/

function firstMatrixJsInHtml(tab_js, id)/*create table in the div id without the two first line*/
{
	var div=document.getElementById(id),
		tab_html=document.createElement("table");
	
	/* add the cells*/
	for(var i=0;i<nbr_cell_vert;i++)
	{
		var line=tab_html.insertRow(-1);
		for(var j=0;j<nbr_cell_hor;j++)
		{
			var row=line.insertCell(-1);
			addEvent(row,'click',changeColor);
			row.style.height=lgth_vert+"px";
			row.style.width=lgth_hor+"px";
		}
	}
	
	/*add the table in the...