JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container"></div>

Babel + JSX

import { useState, useRef } from 'react'

const UsernameInput = (): JSX.Element => {
  const [inputDisabled, setInputDisabled] = useState(true)
  const [username, setUsername] = useState('johnsmith1969')
  const input = useRef<HTMLInputElement>(null)

  const handleClick = () => {
    if (inputDisabled) {
      setInputDisabled(false)
      input?.current?.focus()
    } else {
      setInputDisabled(true)
    }
  }

  return (
    <>
      <label className="input-label" htmlFor="username">
        Username
      </label>
      <div className="mt-1 relative">
        <input
          className="account-input"
          type="text"
          name="username"
          id="username"
          onChange={e => setUsername(e.target.value)}
          value={username}
          ref={input}
          disabled={inputDisabled}
        />
        <button className="input-btn" onClick={() => handleClick()}>
          {inputDisabled ? 'Edit' : 'Save'}
        </button>
      </div>
    </>
  )
}

export default UsernameInput