JSFiddle - React, Tailwind, and code Playground

HTML

<input id="a1" readonly="readonly"/>

CSS

input:focus {
    border-color: black
}

JavaScript

$('#a1').keypress(function(e) {
    e.target.readOnly = false;
}).blur(function(e){
    //e.target.readOnly = true;
});