JSFiddle - React, Tailwind, and code Playground

HTML

<form action="signup.php" method="post" name="form">
	<table>
		<tr>
			<td><canvas id='captcha' width='120' height='40'></canvas></td>
			<td><input type="text" name="captcha" placeholder="Type the code"></td>
		</tr>
		<tr>
			<td><span id="update">Обновить</span></td>
			<td><input type="submit" name="submit" value="Отправить"><br/><span id="wrong" style="color:red"></span></td>	
		</tr>
	</table>
</form>

CSS

table{
	margin-top: 50px;
	margin-left: 50%;
	border-collapse: collapse;
	transform: translateX(-50%);
}
#update{
	cursor: pointer;
	text-decoration: underline;
}

JavaScript

$(document).ready(function(){
	var canvas=document.getElementById('captcha');
	var x=canvas.getContext('2d');
	var arr=['word','dino','sofa'];
	var i=Math.floor(Math.random()*3);
	var keyword=arr[i];
	var grad=x.createLinearGradient(0,0,120,40);
	grad.addColorStop(0.0,'rgb(113,244,174)');
	grad.addColorStop(1.0,'rgb(247,203,109)');
	x.fillStyle=grad;
	x.fillRect(0,5,110,40);

	x.strokeStyle='rgb(140,140,140)';
	x.beginPath();
	x.moveTo(5,10);
	x.lineWidth=1;
	x.lineTo(25,15);
	x.stroke();

	x.strokeStyle='rgb(205,125,204)';
	x.beginPath();
	x.moveTo(25,30);
	x.lineWidth=1;
	x.lineTo(80,15);
	x.stroke();

	x.strokeStyle='rgb(125,115,205)';
	x.beginPath();
	x.moveTo(60,10);
	x.lineWidth=1;
	x.lineTo(90,35);
	x.stroke();

	x.font='25px Arial';
	x.fillStyle='black';
	x.textBaseline='top';
	x.fillText(keyword,10,10);

	$('input[name=submit]').click(function(){
		var check=$('input[name=captcha]').val();
		if(keyword!=check){
			$('#wrong').text('Вы ввели неверный код');
			return false;
		}
	});
});