Input

./components/_forms/Input.tsx

type Props = {
  placeholder?: string
}

export default function Input({placeholder}: Props) {
  return (
    <>
    <label
      htmlFor="UserEmail"
      className="relative block overflow-hidden rounded-md border border-gray-200 focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600"
    >
      <input
        type="tel"
        id="UserEmail"
        placeholder="Мобильный телефон"
        className="peer h-12 w-full border-none bg-transparent p-0 placeholder-transparent focus:border-transparent focus:outline-none focus:ring-0 px-3 pt-3"
        autoFocus
      />

      <span
        className="absolute start-3 top-3 -translate-y-1/2 text-gray-400 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base text-xs peer-focus:text-xs peer-focus:text-light-primary peer-focus:top-3"
      >
        {placeholder}
      </span>
    </label>
    </>
  )
}