JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" placeholder="This is a normal input" />

<br /><br />

<input type="text" placeholder="This is a readonly input" onfocus="this.removeAttribute('readonly');" readonly />

CSS

input {
    border: 2px solid #bdbdbd;
    padding:10px;
    border-radius:4px;
    font-size:14px;
}

input[readonly] {
    cursor: text;
    background-color: #fff;
}