JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <input type="text" placeholder="Enter a username" onfocus="this.removeAttribute('readonly');" readonly />
  <br /><br />
  <input type="password" placeholder="Enter a password" onfocus="this.removeAttribute('readonly');" readonly />
  <br /><br />
  <input type="submit" value="Submit" />
</form>

CSS

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

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