<div id="root"></div>

body {
  align-items: center;
  background: #333;
  color: #fff;
  display: grid;
  justify-items: center;
  height: 100vh;
}

.name {
  background: #000;
  padding: 1em 1.5em;
  position: relative;
  vertical-align: center;
}

span {
  color: #ff8a00;
  font-weight: 900;
}

input {
  border: 0;
  margin-bottom: .25em;
  padding: .5em .25em;
}

label {
  display: block;
  font-size: .75em;
  margin-bottom: 1em;
}

button {
  background-image: linear-gradient(to top left,#ff8a00,#da1b60);
  border: 0;
  border-radius: 2rem;
  color: #fff;
  display: block;
  font-weight: 700;
  padding: .5rem 1rem;
  transition: 70ms;
}

button:hover {
  transform: translateY(1px);
}

const { useState } = React

const App = () => {
  const [input, setValue] = useState("");
  const [name, setName] = useState('Barney Stinson');
  
  handleInput = (event) => {
    setValue(event.target.value);
  }
  
  updateName = (event) => {
    event.preventDefault();
    setName(input);
    setValue("");
  }
  
  return (
    <div className="name">
      <p>Hello, <span>{name}!</span></p>
      <div className="form">
        <input type="text" value={input} name="name-1" onChange={handleInput} />
        <label for="name-1">Update Name</label>
        <button onClick={updateName}>Save</button>
      </div>
    </div>
  )
}

ReactDOM.render(<App />,
document.getElementById("root"))