JSFiddle - React, Tailwind, and code Playground

HTML

<body>

  <h1> Can you find the box containing the diamond? </h1>

  <h2> The diamond will be hidden in a random box. <br>

Click on the box where you think the diamond is hidden. <br>

You have 3 guesses and if wrong, you are advised to try <br>

a higher or lower box, as appropriate. <br>

When you win or lose, the game is automatically re-started <br>

and the diamond is hidden again in another random box. </h2>

  <input type="text" id="mytextbox" />

  <form name="hidenseek">

    <input name="box1" type="button" value="1" onClick="check(box1.value)">
    <input name="box2" type="button" value="2" onClick="check(box2.value)">
    <input name="box3" type="button" value="3" onClick="check(box3.value)">
    <input name="box4" type="button" value="4" onClick="check(box4.value)">
    <input name="box5" type="button" value="5" onClick="check(box5.value)">
    <br>
    <input name="box6" type="button" value="6" onClick="check(box6.value)">
    <input name="box7" type="button" value="7" onClick="check(box7.value)">
    <input name="box8" type="button" value="8" onClick="check(box8.value)">
    <input name="box9" type="button" value="9" onClick="check(box9.value)">
    <input name="box10" type="button" value="10" onClick="check(box10.value)">
    <p>
  </form>

  <h3 id="message"> Click on the box of your choice. </h3>

</body>

CSS

body {
  background-image: url("diamonds.jpg");
  background-color: navy;
}

h1 {
  color: yellow;
  font-family: verdana;
  font-size: 150%;
}

h2 {
  color: white;
  font-family: verdana;
  font-size: 100%;
}

h3 {
  color: yellow;
  font-family: verdana;
  font-size: 100%;
}

JavaScript

var diamond;
var number_of_guesses;

diamond = Math.ceil(Math.random() * 10);
number_of_guesses = 0;

window.alert = function(message) {
  document.getElementById('mytextbox').value = message;
}


function check(guess) {
  if (diamond == guess) {
    window.alert("Congratulations! You have found the diamond.")
    again = window.prompt("Would you like to play another game? Enter Y or N.", "y");
    if (again == "N" || again == "n") {
      window.alert("Thanks for playing.Goodbye.");
      window.close();
    } else {
      window.alert("The diamond has been hidden. You can now try again.");
      window.location.reload();
    }
  } else {
    number_of_guesses = number_of_guesses + 1;
    if (diamond < guess) {
      result = "lower"
    } else {
      result = "higher"
    }
    window.alert("Guess number " + number_of_guesses + " is incorrect. Diamond is " + result + ".");
  }
  if (number_of_guesses >= 3) {
    window.alert("Sorry, you have run out of guesses! The diamond was in box " + diamond);
    again = window.prompt("Would you like to play again? Enter Y or N. ", "y");
    if (again == "N" || again == "n") {
      window.alert("Thanks for playing. Goodbye.");
      window.close();
    } else {
      window.alert("The diamond has been hidden. You can now try again.");
      window.location.reload();
    }
  }
}