React Event Listeners e useState

CustomerList.module.css

.customers {
  list-style: none;
  max-width: 50rem;
  margin: 1rem auto;
  padding: 1rem 0;
  display: grid;
  grid-template-columns: repeat(3, 30%);
  gap: 1rem;
  justify-content: center;
}

NewCostumer.jsx

import classes from "./NewCustomer.module.css";

export default function NewCustomer() {
  return (
    <form className={classes.form}>
      <p>
        <label htmlFor="name">Nome</label>
        <input type="text" name="name" required />
      </p>
      <p>
        <label htmlFor="phone">Telefone</label>
        <input type="text" name="phone" required />
      </p>
      <p>
        <label htmlFor="address">Endereço</label>
        <textarea name="address" rows={3} required></textarea>
      </p>
    </form>
  );
}

NewCustomer.module.css

.form {
  background-color: #fff;
  padding: 1rem;
  width: 20rem;
  margin: 2rem auto;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form label {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  color: #333;
  display: block;
  margin-bottom: 0.5rem;
}

.form input,
.form textarea {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.875rem;
  font-family: "Roboto", sans-serif;
  background-color: #f9f9f9;
}

.form input:focus,
.form textarea:focus {
  border-color: #ff7e5f;
  outline: none;
  box-shadow: 0 0 5px rgba(255, 126, 95, 0.5);
}