JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Guessing game</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
    <h1>PROJETO TIMER</h1>
    <div id="TimerInicial">
        <input type="number"  placeholder="HH" > :
        <input type="number"  placeholder="MM" > :
        <input type="number"  placeholder="SS" >
    </div>

CSS

body {
    width: 100vh;
    margin: 0 auto;
    text-align: center;
    background-color: black;
}

input[type=number] {
    -moz-appearance:textfield;
}

input[type=number], span{
    width: 35px;
    background-color: black;
    font-family: 'digital-7';
    color: greenyellow;
    text-align: center;
} 

.botao {
    text-align: center;
}

JavaScript

let Inicial = {
    seletorTimer: document.getElementById("TimerInicial"),
    letrasRegex: /[A-Z]+/,
    maximo: 59,  
    SemLetras: this.seletorTimer.addEventListener('keyup', () => {
        if (document.getElementById("TimerInicial").value.match(this.letrasRegex)) {
            this.seletorTimer.value = "";
        }
    }), 
    numeroLimite: document.getElementById("TimerInicial").addEventListener('keyup', () => {
        if (this.seletorTimer.value > this.maximo) {
            this.seletorTimer.value = 59;
        }
    }),
};