<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap");

input::placeholder {
  color: #888888;
  font-size: large;
  transition: 0.2s;
}

/*
The ::placeholder pseudo-element can also be clubbed with pseudo-classes like
:hover, :focus, etc.
*/
input:focus::placeholder {
  color: #111111;
}

/* Additional styling */
* {
  font-family: Roboto;
  font-weight: bold;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

input {
  color: #888888;
  display: inline-block;
  margin: 24px 0;
  border: none;
  outline: none;
  padding-bottom: 12px;
  width: 75%;
  font-size: large;
  border-bottom: 2px solid #888888;
  transition: 0.2s;
}

input:focus {
  color: #111111;
  border-bottom: 2px solid #111111;
}