Input

<input
  type="text"
  name="text"
  placeholder="Write here"
  class="flex gap-8px items-center text-p2 peer text-black py-8px rounded-8px border placeholder:text-black-500 outline-none transition-all dark:text-white dark:placeholder:text-black-400 px-16px bg-white border-black-200 hover:border-black-600 focus:border-black-600 active:border-black-600 user-invalid:border-red-600 user-invalid:hover:border-red-600 user-invalid:focus:border-red-600 user-invalid:active:border-red-600 user-invalid:bg-red-50 dark:bg-black dark:border-black-600 dark:hover:border-black-400 dark:focus:border-black-400 dark:active:border-black-400 dark:user-invalid:bg-red-900 dark:user-invalid:bg-black shadow-[0_1px_2px_0px_#0000000D] focus:shadow-[0_0_0_2px_#0F172A33] dark:shadow-[0_1px_2px_0px_rgba(255,255,255,0.06)] dark:focus:shadow-[0_0_0_2px_rgba(255,255,255,0.33)] disabled:bg-black-50 disabled:border-black-100 dark:disabled:bg-black-800 dark:disabled:border-black-700 disabled:shadow-none"
  pattern="[a-zA-Z0-9_]+"
  value="">
</input>

<input
  type="password"
  name="pass"
  placeholder="••••••••••"
  class="flex gap-8px items-center text-p2 peer text-black py-8px rounded-8px border placeholder:text-black-500 outline-none transition-all dark:text-white dark:placeholder:text-black-400 px-16px bg-white border-black-200 hover:border-black-600 focus:border-black-600 active:border-black-600 user-invalid:border-red-600 user-invalid:hover:border-red-600 user-invalid:focus:border-red-600 user-invalid:active:border-red-600 user-invalid:bg-red-50 dark:bg-black dark:border-black-600 dark:hover:border-black-400 dark:focus:border-black-400 dark:active:border-black-400 dark:user-invalid:bg-red-900 dark:user-invalid:bg-black shadow-[0_1px_2px_0px_#0000000D] focus:shadow-[0_0_0_2px_#0F172A33] dark:shadow-[0_1px_2px_0px_rgba(255,255,255,0.06)] dark:focus:shadow-[0_0_0_2px_rgba(255,255,255,0.33)] disabled:bg-black-50 disabled:border-black-100 dark:disabled:bg-black-800 dark:disabled:border-black-700 disabled:shadow-none"
  pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*_+-=;:<>.\/?]).{8,}$"
  value="">
</input>