JSFiddle - React, Tailwind, and code Playground

by Chuck Tornton

HTML

<time class="clock">
  <span class="clock__hand clock__hand--hour"></span>:
  <span class="clock__hand clock__hand--minute"></span>:
  <span class="clock__hand clock__hand--second"></span>
  <svg class="clock__face" aria-hidden="true" role="presentation">
    <circle class="clock__face-stroke"></circle>
  </svg>
</time>

CSS

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.clock {
	width: 300px;
  height: 300px;
  background: #000;
}