JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id = "timeInput" maxlength = 14>

JavaScript

$("#timeInput").focusin(function (evt) {
        $(this).keypress(function () {
            content=$(this).val();
            content1 = content.replace(/\:/g, '');
            length=content1.length;
            if(((length % 2) == 0) && length < 10 && length > 1){
                $('#timeInput').val($('#timeInput').val() + ':');
            }
        });
    });