JSFiddle - React, Tailwind, and code Playground

HTML

<font size="6">  
	<table width="250" height="250" border="1"> 
		<tbody id="myTable"></tbody>
	</table>
</font>

<font size="4" >Nome:
	<input id="user" type="text" />
	<button id="button-add-row">Confirmar</button>

	<div id="time"></div>
</font>

CSS

.ended {
	color: green;
	text-align: center;
}

JavaScript

function startTimer(minutes, display, endedFunction) {
	var seconds = 60;

	display.textContent = minutes + ":00";

	minutes--;

	var timer = setInterval(function () {
		if (seconds == 0) {
			if (minutes == 0) {
				clearInterval(timer);

				if (endedFunction) {
					endedFunction.call(display);
					return;
				}
			} else {
				minutes--;
				seconds = 59;
			}
		} else {
			seconds--;
		}

		var _minutes = (minutes < 10 ? ("0" + minutes) : minutes);
		var _seconds = (seconds < 10 ? ("0" + seconds) : seconds);

		display.textContent = _minutes + ":" + _seconds;
	}, 1000);
}

document.getElementById("button-add-row").addEventListener("click", addRow);

function addRow() {
	var newRow = document.createElement('tr');
	newRow.insertCell(0).innerHTML = document.getElementById("user").value;

	startTimer(20, newRow.insertCell(1), after);

	var table = document.getElementById("myTable");
	table.appendChild(newRow);
}

function after() {
	this.textContent = "Acabou!";
	this.classList.add("ended");
}