JSFiddle - React, Tailwind, and code Playground

HTML

<div id="input">
  <button onclick="start()">start</button>
  <button onclick="stop()">stop</button>
  <button onclick="reset()">reset</button>
  <div style="font-size:10em" id="counter">0</div>
  <br>
  <p>Your score:</p>
  <div style="font-size:5em" id="score">0</div>
  <script>
    var countTimer = setInterval('count()', 1000);
  </script>
</div>
<div id="playground">
  <table border=100 cellpadding=0 cellspacing=0>
    <tr>
      <td>
        <form name="play">
          <center>
            <INPUT TYPE="button" NAME="one" OnClick="one ()" id="one" value="      ">
            <INPUT TYPE="button" NAME="two" OnClick="two ()" id="two" value="      ">
            <INPUT TYPE="button" NAME="three" OnClick="three ()" id="three" value="      ">
            <br>
            <INPUT TYPE="button" NAME="four" OnClick="four ()" id="four" value="      ">
            <INPUT TYPE="button" NAME="five" OnClick="five ()" id="five" value="      ">
            <INPUT TYPE="button" NAME="six" OnClick="six ()" id="six" value="      ">
            <br>
            <INPUT TYPE="button" NAME="seven" OnClick="seven ()" id="seven" value="      ">
            <INPUT TYPE="button" NAME="eight" OnClick="eight ()" id="eight" value="      ">
            <INPUT TYPE="button" NAME="nine" OnClick="nine ()" id="ten" value="      ">
            <br>
      </td>
    </tr>
  </table>
</div>

CSS

table {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  height: 90%;
  background-color:#66ff00;
}
#playground input {
  position: inherit;
  height: 100px;
  width: 100px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}
#input {
  height:40px;
}
#area {
  background-color:#888;
  position:absolute;
  left:0px;
  right:0px;
  top:50px;
  bottom:0px;
}
#area button {
  width:150px;
  height:30px;
  position:absolute;
}
.red {
  color:red;
}

JavaScript

function one() {
     document.play.one.value = "";
     // get the counter element
     var score = document.getElementById("score");
     // get it's value
     var value = parseInt(score.innerHTML);
     // increase it
     value = value + 1;
     // write the new value back
     score.innerHTML = value;
   }

   function two() {
     document.play.two.value = "";
     // get the counter element
     var score = document.getElementById("score");
     // get it's value
     var value = parseInt(score.innerHTML);
     // increase it
     value = value + 1;
     // write the new value back
     score.innerHTML = value;
   }

   function three() {
     document.play.three.value = "";
     // get the counter element
     var score = document.getElementById("score");
     // get it's value
     var value = parseInt(score.innerHTML);
     // increase it
     value = value + 1;
     // write the new value back
     score.innerHTML = value;
   }

   function four() {
     document.play.four.value = "";
     // get the counter element
     var score = document.getElementById("score");
     // get it's value
     var value = parseInt(score.innerHTML);
     // increase it
     value = value + 1;
     // write the new value back
     score.innerHTML = value;
   }

   function five() {
     document.play.five.value = "";
     // get the counter element
     var score = document.getElementById("score");
     // get it's value
     var value = parseInt(score.innerHTML);
     // increase it
     value = value + 1;
     // write the new value back
     score.innerHTML = value;

   }

   function six() {
     document.play.six.value = "";
     // get the counter element
     var score = document.getElementById("score");
     // get it's value
     var value = parseInt(score.innerHTML);
     // increase it
     value = value + 1;
     // write the new value back
     score.innerHTML = value;
   }

   function seven() {
     document.play.seven.value = "";
     // get the counter...