Brown Markup Library

<label class="label" for="first_name">
  <span>First Name</span>
  <input
    autocomplete
    class="input"
    id="first_name"
    name="first_name"
    placeholder="Josiah"
    type="text"
  />
</label>

.input {
  background: rgb(249, 250, 250);
  border: 1px solid var(--brown);
  box-shadow:
    0 0.7px 0.7px -49px rgba(0, 0, 0, 0.02),
    0 1.8px 1.8px -49px rgba(0, 0, 0, 0.028),
    0 3.4px 3.4px -49px rgba(0, 0, 0, 0.035),
    0 6px 6px -49px rgba(0, 0, 0, 0.042),
    0 11.3px 11.3px -49px rgba(0, 0, 0, 0.05),
    0 27px 27px -49px rgba(0, 0, 0, 0.07);
  font-size: 16px;
  margin: 0.5rem 0;
  padding: 0.5rem;
}
.input:hover {
  border-color: var(--red);
}
.label {
  color: var(--darkGray);
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.0625rem;
  line-height: 1.72727;
  margin-top: 0.5rem;
  text-transform: uppercase;
  width: 100%;
  visibility: visible;
}
@media screen and (preferes-reduced-motion: no-preference) {
  .input {
    transition: border 0.25s ease 0s;
  }
}