//changing name

const [editNameState, setEditNameState] = useState(false);
const [name, setName] = useState({
    firstName: '',
    lastName: ''
});

//current function

<div className="border-2 border-gray-300  py-3 text-sm px-4 mb-6">
     <div className="flex flex-row justify-between mb-2">
          <p>Full Name</p>
          <Buttons 
             title={!editNameState ? 'Edit Full Name' : 'Cancel'} outline onClick={() => {
                    setEditNameState(!editNameState)
                    }}/>
      </div>
      <div className="flex flex-row justify-between my-6">
            <div>
               {editNameState ?
                    <div>
                        <label>First Name</label>
                          <Input value={name.firstName || user.firstName} onChange={(event) => {
                                            setName({...name, firstName: event.target.value})
                                        }}/><br/>
                         <label>Last Name</label>
                           <Input value={name.lastName || user.lastName} onChange={(event) => {
                                            setName({...name, lastName: event.target.value})
                                        }}/>
                                    </div>
                                    :
                                <p>{user.firstName + ' ' + user.lastName}</p>
                }
                </div>
                   {editNameState && <Buttons title="Save" onClick={async () => {
                      setEditNameState(false)
                    await handleNameChange()
                   }}/>}
             </div>
       </div>

//What I Need new button format in tailwind UI

    <button  
        title={!editNameState ? 'Edit Full Name' : 'Cancel'} 
        outline onClick={() => {
                            setEditNameState(!editNameState)
                        }} 
        class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-400 hover:bg-red-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
        Edit Full Name
    </button>

//In Ant design button is but in Tailwind UI button is button text in this case editNameState is not working for tailwind please help me to work it same as ant design