input-1

• Vista previa

  Nombre(s) *

• Código

  const Input1 = () => {
    return (
      <label className="flex w-full max-w-lg relative">
        <input
          type="text"
          className="bg-transparent ring-1 ring-border w-full h-12 rounded-lg peer px-5 transition-all outline-none focus:ring-foreground valid:ring-foreground"
          required
        />
        <span className="absolute top-1/2 -translate-y-1/2 left-3 peer-focus:top-0 peer-focus:text-xs peer-focus:font-semibold transition-all bg-background px-2 cursor-text peer-valid:top-0 peer-valid:text-xs peer-valid:font-semibold text-muted-foreground flex items-center gap-2">
          Nombre(s) <span className="text-red-500">*</span>
        </span>
      </label>
    );
  };
  
  export default Input1;