Unknown property 'stroke-linecap' found, use 'strokeLinecap' instead
29 <div className="absolute mt-4 right-11">
30 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-100" : "scale-0"}`} onClick={ ()=>setShowPassword(!showPassword)}>
31 <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
32 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />33 </svg>
34 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-0" : "scale-100"}`} onClick={ ()=>setShowPassword(!showPassword)}>
35 <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
Unknown property 'class' found, use 'className' instead
21 </header>
22 <main className="flex-grow w-full mx-auto min-h-full">
23 <div className="mx-auto w-full">
24 <form class="w-9/12 lg:w-1/5 mx-auto" method="POST" action="/api/auth/sign-up">25 <fieldset className="mx-auto grid row-3 gap-2">
26 <input className="transition ease-in-out text-xl outline-none bg-zinc-600 m-2 px-2 py-1 border-2 border-zinc-600 rounded-lg focus:border-zinc-500" type="email" name="email" placeholder="Email" />
27 <div className="grid grid-rows-1 relative">
Unknown property 'stroke-linejoin' found, use 'strokeLinejoin' instead
29 <div className="absolute mt-4 right-11">
30 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-100" : "scale-0"}`} onClick={ ()=>setShowPassword(!showPassword)}>
31 <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
32 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />33 </svg>
34 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-0" : "scale-100"}`} onClick={ ()=>setShowPassword(!showPassword)}>
35 <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
Unknown property 'stroke-width' found, use 'strokeWidth' instead
27 <div className="grid grid-rows-1 relative">
28 <input className="transition ease-in-out text-xl outline-none bg-zinc-600 m-2 px-2 py-1 border-2 border-zinc-600 rounded-lg focus:border-zinc-500" type={showPassword? "text" : "password"} id="passwordBox" name="password" placeholder="Password"/>
29 <div className="absolute mt-4 right-11">
30 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-100" : "scale-0"}`} onClick={ ()=>setShowPassword(!showPassword)}>31 <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
32 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
33 </svg>
Unknown property 'stroke-linecap' found, use 'strokeLinecap' instead
28 <input className="transition ease-in-out text-xl outline-none bg-zinc-600 m-2 px-2 py-1 border-2 border-zinc-600 rounded-lg focus:border-zinc-500" type={showPassword? "text" : "password"} id="passwordBox" name="password" placeholder="Password"/>
29 <div className="absolute mt-4 right-11">
30 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-100" : "scale-0"}`} onClick={ ()=>setShowPassword(!showPassword)}>
31 <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />32 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
33 </svg>
34 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-0" : "scale-100"}`} onClick={ ()=>setShowPassword(!showPassword)}>
Unknown property 'stroke-linejoin' found, use 'strokeLinejoin' instead
28 <input className="transition ease-in-out text-xl outline-none bg-zinc-600 m-2 px-2 py-1 border-2 border-zinc-600 rounded-lg focus:border-zinc-500" type={showPassword? "text" : "password"} id="passwordBox" name="password" placeholder="Password"/>
29 <div className="absolute mt-4 right-11">
30 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-100" : "scale-0"}`} onClick={ ()=>setShowPassword(!showPassword)}>
31 <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />32 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
33 </svg>
34 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-0" : "scale-100"}`} onClick={ ()=>setShowPassword(!showPassword)}>
Unknown property 'stroke-width' found, use 'strokeWidth' instead
31 <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
32 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
33 </svg>
34 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-0" : "scale-100"}`} onClick={ ()=>setShowPassword(!showPassword)}>35 <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
36 </svg>
37 </div>
Unknown property 'class' found, use 'className' instead
37 </div>
38 </div>
39 <input class="transition ease-in-out text-xl outline-none bg-zinc-600 m-2 px-2 py-1 border-2 border-zinc-600 rounded-lg focus:border-zinc-500" type={showPassword? "text" : "password"} name="password" placeholder="Confirm password" />
40 <p class="m-auto my-2 lg:m-2">Already have an account? Sign in <a class="transition ease-in-out underline hover:text-sky-300" href="/sign-in">here</a></p>41 <input class="rounded-lg bg-neutral-300 dark:bg-neutral-500 px-3 py-2 transition ease-in-out enabled:hover:scale-110 enabled:focus:scale-110 mx-auto my-3 enabled:dark:hover:bg-neutral-400 enabled:dark:focus:bg-neutral-400 block text-2xl outline-none" type="submit" value="Submit" />
42 </fieldset>
43
Unknown property 'class' found, use 'className' instead
37 </div>
38 </div>
39 <input class="transition ease-in-out text-xl outline-none bg-zinc-600 m-2 px-2 py-1 border-2 border-zinc-600 rounded-lg focus:border-zinc-500" type={showPassword? "text" : "password"} name="password" placeholder="Confirm password" />
40 <p class="m-auto my-2 lg:m-2">Already have an account? Sign in <a class="transition ease-in-out underline hover:text-sky-300" href="/sign-in">here</a></p>41 <input class="rounded-lg bg-neutral-300 dark:bg-neutral-500 px-3 py-2 transition ease-in-out enabled:hover:scale-110 enabled:focus:scale-110 mx-auto my-3 enabled:dark:hover:bg-neutral-400 enabled:dark:focus:bg-neutral-400 block text-2xl outline-none" type="submit" value="Submit" />
42 </fieldset>
43
Unknown property 'class' found, use 'className' instead
36 </svg>
37 </div>
38 </div>
39 <input class="transition ease-in-out text-xl outline-none bg-zinc-600 m-2 px-2 py-1 border-2 border-zinc-600 rounded-lg focus:border-zinc-500" type={showPassword? "text" : "password"} name="password" placeholder="Confirm password" />40 <p class="m-auto my-2 lg:m-2">Already have an account? Sign in <a class="transition ease-in-out underline hover:text-sky-300" href="/sign-in">here</a></p>
41 <input class="rounded-lg bg-neutral-300 dark:bg-neutral-500 px-3 py-2 transition ease-in-out enabled:hover:scale-110 enabled:focus:scale-110 mx-auto my-3 enabled:dark:hover:bg-neutral-400 enabled:dark:focus:bg-neutral-400 block text-2xl outline-none" type="submit" value="Submit" />
42 </fieldset>
Unknown property 'stroke-linejoin' found, use 'strokeLinejoin' instead
32 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
33 </svg>
34 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-0" : "scale-100"}`} onClick={ ()=>setShowPassword(!showPassword)}>
35 <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />36 </svg>
37 </div>
38 </div>
Unknown property 'stroke-linecap' found, use 'strokeLinecap' instead
32 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
33 </svg>
34 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-0" : "scale-100"}`} onClick={ ()=>setShowPassword(!showPassword)}>
35 <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />36 </svg>
37 </div>
38 </div>
Unknown property 'class' found, use 'className' instead
38 </div>
39 <input class="transition ease-in-out text-xl outline-none bg-zinc-600 m-2 px-2 py-1 border-2 border-zinc-600 rounded-lg focus:border-zinc-500" type={showPassword? "text" : "password"} name="password" placeholder="Confirm password" />
40 <p class="m-auto my-2 lg:m-2">Already have an account? Sign in <a class="transition ease-in-out underline hover:text-sky-300" href="/sign-in">here</a></p>
41 <input class="rounded-lg bg-neutral-300 dark:bg-neutral-500 px-3 py-2 transition ease-in-out enabled:hover:scale-110 enabled:focus:scale-110 mx-auto my-3 enabled:dark:hover:bg-neutral-400 enabled:dark:focus:bg-neutral-400 block text-2xl outline-none" type="submit" value="Submit" />42 </fieldset>
43
44 </form>
Unknown property 'stroke-width' found, use 'strokeWidth' instead
28 <div className="grid grid-rows-1 relative">
29 <input className="transition ease-in-out text-xl outline-none bg-zinc-600 m-2 px-2 py-1 border-2 border-zinc-600 rounded-lg focus:border-zinc-500" type={showPassword? "text" : "password"} id="passwordBox" name="password" placeholder="Password"/>
30 <div className="absolute mt-4 right-11">
31 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-100" : "scale-0"}`} onClick={ ()=>setShowPassword(!showPassword)}>32 <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
33 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
34 </svg>
Unknown property 'stroke-width' found, use 'strokeWidth' instead
32 <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
33 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
34 </svg>
35 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-0" : "scale-100"}`} onClick={ ()=>setShowPassword(!showPassword)}>36 <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
37 </svg>
38 </div>
Unknown property 'stroke-linecap' found, use 'strokeLinecap' instead
30 <div className="absolute mt-4 right-11">
31 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-100" : "scale-0"}`} onClick={ ()=>setShowPassword(!showPassword)}>
32 <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
33 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />34 </svg>
35 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-0" : "scale-100"}`} onClick={ ()=>setShowPassword(!showPassword)}>
36 <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
Unknown property 'stroke-linejoin' found, use 'strokeLinejoin' instead
29 <input className="transition ease-in-out text-xl outline-none bg-zinc-600 m-2 px-2 py-1 border-2 border-zinc-600 rounded-lg focus:border-zinc-500" type={showPassword? "text" : "password"} id="passwordBox" name="password" placeholder="Password"/>
30 <div className="absolute mt-4 right-11">
31 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-100" : "scale-0"}`} onClick={ ()=>setShowPassword(!showPassword)}>
32 <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />33 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
34 </svg>
35 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-0" : "scale-100"}`} onClick={ ()=>setShowPassword(!showPassword)}>
Unknown property 'stroke-linecap' found, use 'strokeLinecap' instead
29 <input className="transition ease-in-out text-xl outline-none bg-zinc-600 m-2 px-2 py-1 border-2 border-zinc-600 rounded-lg focus:border-zinc-500" type={showPassword? "text" : "password"} id="passwordBox" name="password" placeholder="Password"/>
30 <div className="absolute mt-4 right-11">
31 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-100" : "scale-0"}`} onClick={ ()=>setShowPassword(!showPassword)}>
32 <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />33 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
34 </svg>
35 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-0" : "scale-100"}`} onClick={ ()=>setShowPassword(!showPassword)}>
Unknown property 'stroke-linejoin' found, use 'strokeLinejoin' instead
30 <div className="absolute mt-4 right-11">
31 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-100" : "scale-0"}`} onClick={ ()=>setShowPassword(!showPassword)}>
32 <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
33 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />34 </svg>
35 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-0" : "scale-100"}`} onClick={ ()=>setShowPassword(!showPassword)}>
36 <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
Unknown property 'class' found, use 'className' instead
45 <img src="/images/GoogleLogo.webp" className="w-7"/>
46 <p>Sign in with Google</p>
47 </div>
48 <p className="m-auto my-2 lg:m-2">Don't have an account? Sign up <a class="transition ease-in-out underline hover:text-sky-300" href="/sign-up">here</a></p>49 </fieldset>
50
51 </form>
Unknown property 'class' found, use 'className' instead
37 </svg>
38 </div>
39 </div>
40 <input class="rounded-lg bg-neutral-300 dark:bg-neutral-500 px-2 py-1.5 transition ease-in-out mx-2 my-3 enabled:dark:hover:bg-neutral-400 enabled:dark:focus:bg-neutral-400 block text-xl outline-none cursor-pointer" type="submit" value="Sign In" />41 <div className="relative border-b-2 mx-2 my-6">
42 <span className="absolute -top-2.5 text-center w-full "><a className="dark:bg-zinc-700 px-2 py-1 rounded-lg">OR</a></span>
43 </div>
Unknown property 'stroke-linecap' found, use 'strokeLinecap' instead
33 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
34 </svg>
35 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-0" : "scale-100"}`} onClick={ ()=>setShowPassword(!showPassword)}>
36 <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />37 </svg>
38 </div>
39 </div>
Unknown property 'stroke-linejoin' found, use 'strokeLinejoin' instead
33 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
34 </svg>
35 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`absolute w-6 h-6 m-auto select-none cursor-pointer ${showPassword? "scale-0" : "scale-100"}`} onClick={ ()=>setShowPassword(!showPassword)}>
36 <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />37 </svg>
38 </div>
39 </div>
Unknown property 'class' found, use 'className' instead
66 </fieldset>
67 <fieldset className="grid grid-cols-3 lg:grid-cols-4 p-2 mx-auto">
68 <label className="text-xl lg:text-2xl my-auto p-1">Category</label>
69 <div id="dropdown" class={`relative ${dropdownStyles.dropdown} bg-zinc-300 dark:bg-zinc-600 rounded-lg px-3 dark:text-gray-200 dark:text-zinc-300 text-neutral-700 col-span-2 lg:col-span-3 p-0`} active={"" + dropdownActive}>70 <p className="text-lg transition ease-in-out duration-100 p-1 leading-loose hover:cursor-pointer select-none rounded-none" onClick={dropdownClick}>{category}</p>
71 <ul className="grid grid-col-1 py-1 text-sm bg-zinc-300 dark:bg-zinc-600 rounded-b-lg pr-5 pl-3 dark:text-gray-200 dark:text-neutral-300 text-neutral-700 w-full max-h-32 overflow-y-auto mx-auto" aria-labelledby="dropdownMenu">
72 <p className="text-lg transition ease-in-out duration-100 p-1 hover:text-sky-500 dark:hover:text-sky-400 leading-loose hover:cursor-pointer" onClick={dropdownClickBug}>Bug</p>
Description
React components use JSX, not HTML.
So we need to use JSX attributes and React replicate the respective HTML property/attribute while rendering.
Use of HTML property in JSX can sometimes lead to errors.
For example, class
is a keyword in JavaScript (JSX is an extension of JavaScript), so it will throw an error.
However, in HTML it is a valid attribute.
Note: If you use React with Web Components, use the class
attribute instead.
Bad Practice
import React from 'react';
const Hello = <div class="hello">Hello World</div>;
Recommended
import React from 'react';
const Hello = <div className="hello">Hello World</div>;