JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <button onclick="myFunction();">Start Timer</button>
    <div id="timer">
        <div></div>

CSS

#wrapper {
    border:2px solid black;
    border-radius:5px;
    width:400px;
    height:300px;
}
#timer {
    border:2px solid black;
    border-radius:5px;
    width:150px;
    height:50px;
    margin : 75px 125px;
    font-size:40px;
}

JavaScript

function myFunction() {
      var btnstop = document.createElement("BUTTON");
      var btnplaypause = document.createElement("BUTTON");
      var t = document.createTextNode("Stop");
      var u = document.createTextNode("Pause");
      btnstop.appendChild(t);
      btnplaypause.appendChild(u);
      my_button = document.getElementById("wrapper");
      my_button.appendChild(btnstop);
      my_button.appendChild(btnplaypause);
      btnstop.id = "stop";
      btnplaypause.id = "playpause"
      btnstop.onclick = stoptimer;
      startTime();
  }

  function checkTime(i) {
      if (i < 10) {
          i = "0" + i;
      }
      return i;
  }

  function startTime() {
      var today = new Date();
      var h = today.getHours();
      var m = today.getMinutes();
      var s = today.getSeconds();
      // add a zero in front of numbers<10
      m = checkTime(m);
      s = checkTime(s);
      document.getElementById('timer').innerHTML = h + ":" + m + ":" + s;
      t = setTimeout(function () {
          startTime()
      }, 500);
  }

  function stoptimer() {
      document.getElementById("stop").disabled = true;
      document.getElementById("playpause").disabled = true;

  }