Animated Form Labels

index.html

<div className="flex gap-3 justify-between">
  <div className="animated-label w-full">
    <fieldset>
      <input
        defaultValue={user?.FirstName}
        id="first-name"
        name="first-name"
        type="text"
        autoComplete="given-name"
        className={`${inputStyles} ${hasError['first-name'] && 'border-red-500'}`}
        required
        aria-required="true"
      />
      <label htmlFor="first-name">First Name</label>
    </fieldset>
  </div>
  <div className="animated-label w-full">
    <fieldset>
      <input
        defaultValue={user?.LastName}
        id="last-name"
        name="last-name"
        type="text"
        autoComplete="family-name"
        className={`${inputStyles} ${hasError['last-name'] && 'border-red-500'}`}
        required
        aria-required="true"
      />
      <label htmlFor="last-name">Last Name</label>
    </fieldset>
  </div>
</div>

styles.css

/* Animated Form Labels */
.animated-label fieldset {
  position: relative;
}
.animated-label label {
  position: absolute;
  top: 13px;
  left: 12px;
  color: #ADABAB;
  font-size: 19px;
  transform: translate3d(0, 0, 0);
  transition: all 0.1s ease-in-out;
}
.animated-label input {
  font-size: 19px;
  transition: all 0.2s ease-in-out;
  padding: 22px 0.75rem 10px;
}
.animated-label input:valid,
.animated-label input:focus {
  padding: 22px 0.75rem 10px;
}
.animated-label input:focus {
  outline: 0;
}
.animated-label input:valid + label,
.animated-label input:focus + label {
  color: #1E1D24;
  font-size: 13px;
  transform: translate3d(0, -10px, 0);
}