JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>

<head>

<title>Game of luck</title>

<style>

body
{
	background-color:brown;
}


.circle
{
	width:50px; height:50px; border-radius:50px; background-color:pink;
}

.center{padding-left: 0; padding-right: 0; margin-left: auto;
margin-right: auto; display: block; width: 800px; width=300 height=100; 
border:1px}

</style>


<script>


		var randomNumbers = new Array();
        for(var times=0; times<3; times++)
      {
		randomNumbers.push(Math.floor(Math.random() * 9) + 1);
	  }

function rightNumber(circleNumber)
{  var result=false;
   for(var index=0; index<3; index++)
   {
   	if(randomNumbers[index]==circleNumber)
   	{
   		result=true;
   		break;
   	}
   }
   return result;
}



 
   var winCount=0;
   var count=0;

   function change(circleNumber)
   { if(!alreadyOver())
    {
     count++;
    

    if(rightNumber(circleNumber))
    {
     document.getElementById(circleNumber).style.backgroundColor="purple";
     alert("Correct");
     winCount++;
    }
    else
    {
      alert("incorrect");
    }
    WinOrLose();
  }
}
else
{
  restart();
}
function restart()
{
   var playAgain = prompt("The game is already over. Would you like to play again? Yes/No");
   var YesOrNo=playAgain.toLowerCase();
   if(YesOrNo=="yes")
   {
    location.reload();
   }

else if(YesOrNo!="no")
   {
      again();
   }



}

function again()
{
   alert("answer must be yes or no");
  restart();
}

function WinOrLose()
{
  if(count==3)
  {
    if(winCount==3)
    {
      alert("You win");
    }
    else
    {
      alert("You lose");
    }
    restart();
  }
}

function alreadyOver()
{ 
  if(count==3)
  {
    return true;
  }
  else
  {
    return false;
  }
}
   




</script>

</head>

<body>

<canvas id="heading" width=300 height=100 style="border:1px" class="center">
<h1>Game of luck</h1>
</canvas>

<script type = "application/javascript" language="javascript">

var heading = document.getElementById("heading");
var...