JSFiddle - React, Tailwind, and code Playground

by WoJWoJ

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div class="clock" id="clock">
  <span class="el" id="hour">8</span>
  <span class="el" id="minute">{{minute}}</span>
  <span class="vl"></span>
  <span class="vl"></span>
</div>

CSS

.clock {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-column-gap: 20px;
  width: 400px;
}

.el {
  font-size: 150px;
  background-color: black;
  color: white;
  font-family: sans-serif;
  font-weight: bolder;
  width:2ch;
  height:2ch;
  text-align:right; /* Or left based on your needs */
  border:20px solid black;
  border-radius: 20px;
}

.vl {
  border-top: 2px solid white;
  height: 200px;
  position: relative;
  top: -105px;
}

JavaScript

new Vue({
  el: "#clock",
  data: {
    hour: 0,
    minute: 0,
  },
  mounted() {
		now = new Date
    this.hour = now.getHours()
    this.minute = now.getMinutes()
  }
})