JSFiddle - React, Tailwind, and code Playground

by Bob Jones

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<div id="app">
		<input placeholder="Javascript timestamp..." id="timestamp"><br>
		<p><span id="hours"> ??</span> hours</p>
		<p><span id="minutes"> ??</span> minutes</p>
		<p><span id="seconds"> ??</span> seconds</p>
		<p><span id="milliseconds">???</span> milliseconds</p>
	</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap');

* {
  font-family: "Inconsolata", monospace;
  font-size: 24px;
}

span {
  font-weight: bold;
  white-space: pre;
}

input {
  border-width: 0 0 0.5px 0;
  width: 500px;
  outline: none;
}

JavaScript

setInterval(function() {
	let parsed;
  if (!isNaN(Number(timestamp.value))) {
  	parsed = new Date(Number(timestamp.value));
  } else {
  	parsed = new Date(timestamp.value);
  }
  const date = moment(parsed);
  const now = moment();
  const diff = moment.duration(now.diff(date));
  hours.innerText =
    " " +
    diff
      .hours()
      .toString()
      .padStart(2, "0");
  minutes.innerText =
    " " +
    diff
      .minutes()
      .toString()
      .padStart(2, "0");
  seconds.innerText =
    " " +
    diff
      .seconds()
      .toString()
      .padStart(2, "0");
  milliseconds.innerText = diff.milliseconds().toString().padStart(3, "0");
}, 100);