Floating Label Input

export function FloatingInput({ label, ...props }) {
  return (
    <label className="relative block">
      <input
        {...props}
        placeholder=" "
        className="peer w-full rounded-lg border border-slate-300 bg-white px-3 pt-5 pb-1.5
          text-sm text-slate-900 focus:border-indigo-500 focus:outline-none focus:ring-1
          focus:ring-indigo-500"
      />
      <span className="pointer-events-none absolute left-3 top-3.5 text-sm text-slate-400
        transition-all peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-sm
        peer-focus:top-1.5 peer-focus:text-xs peer-focus:text-indigo-600">
        {label}
      </span>
    </label>
  );
}