<form>
  <label for="username">Username</label>
  <input type="text" name="username" />
  <br /><br />
   <label for="password">Password</label>
  <input type="password" name="username" />
</form>
body {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}
form {
  border: 1px dashed #333;
  padding: 25px;
  transition: background 0.3s ease;
  &:focus-within {
    background: #f4d35e;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.