// cambio de nombre

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

// función actual

 <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>

// Lo que necesito: nuevo formato de botón en la interfaz de usuario de viento de cola

 <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>

// En el botón de diseño de Ant está pero en el botón de la interfaz de usuario de Tailwind es el texto del botón en este caso editNameState no funciona para el viento de cola por favor ayúdame a trabajar igual que el diseño de hormigas