<form>
  <label>
    <span>First name</span>
    <input name="first_name" placeholder="John..." required type="text" />
  </label>

  <button type="reset">reset fields</button>
</form>

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

label > span {
  color: rgb(55 65 81);
  font-weight: 500;
  font-size: 0.875rem;
}

input {
  border: 1px solid rgb(19 78 74 / 0.1);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  height: 2rem;
  padding: 0.5rem;
}

button {
  background-color: rgb(15 118 110);
  border: 1px solid rgb(15 118 110 / 0.3);
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  color: rgb(255 255 255);
  font-size: 0.875rem;
  font-weight: 500;
  height: 2rem;
  padding: 0.25rem 1rem;
}