JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
  <div class="code">
    <span>{{ value[0] }}</span>
    <span>{{ value[1] }}</span>
    <span>{{ value[2] }}</span>
    <span>{{ value[3] }}</span>
  </div>
  <button @click="reset">
    Clear
  </button>
</div>

SCSS

.code {
  display: flex;
  
  span {
    border: 1px solid #ddd;
    padding: 10px;
    margin: 0px 5px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.input {
  position: absolute;
  opacity: 0;
}

JavaScript

new Vue({
	el: '#app',
  data: {
  	value: '',
  },
  mounted() {
  	document.addEventListener('keypress', this.onChange, false);
  },
  beforeDestroy() {
  	document.removeEventListener('keypress', this.onChange, false);
  },
  methods: {
  	reset() {
    	this.value = '';
    },
    onChange(event) {
    	this.value += String.fromCharCode(event.keyCode);
    },
  },
})