Floating Label Input

import { useId } from 'react';

// The float is driven by :focus / :not(:placeholder-shown), which Tailwind
// cannot express as a peer variant, so the state rules live in a style element.
// 0.6875 × 16px = an effective 11px once floated.
const css = `
.ff-label {
  transform-origin: left top;
  transition: transform 180ms ease;
}
.ff-input:focus + .ff-label,
.ff-input:not(:placeholder-shown) + .ff-label {
  transform: translateY(-24px) scale(0.6875);
}
.ff-underline {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 250ms ease;
}
.ff-input:focus ~ .ff-underline {
  transform: scaleX(1);
}
`;

export function FloatingLabelInput({
  label = 'Email address',
  type = 'email',
}: {
  label?: string;
  type?: string;
}) {
  const id = useId();

  return (
    <div className="relative w-[260px] pb-[1.5px] pt-[22px]">
      <style>{css}</style>
      <input
        id={id}
        type={type}
        placeholder=" "
        className="ff-input block h-9 w-full rounded-none border-none bg-transparent p-0 text-[16px] leading-9 text-[#1a1a1a] caret-[#8f7635] outline-none dark:text-[#ece9e2] dark:caret-[#c8a96a]"
      />
      <label
        htmlFor={id}
        className="ff-label pointer-events-none absolute left-0 top-[22px] text-[16px] leading-9 text-[#6f6d64] dark:text-[#8a8d96]"
      >
        {label}
      </label>
      <span aria-hidden="true" className="absolute inset-x-0 bottom-0 h-[1.5px] bg-[rgba(111,109,100,0.45)] dark:bg-[rgba(138,141,150,0.4)]" />
      <span aria-hidden="true" className="ff-underline absolute inset-x-0 bottom-0 h-[1.5px] bg-[#8f7635] dark:bg-[#c8a96a]" />
    </div>
  );
}