Login Button - Copy this React, Tailwind Component to your project

import-{-useState,-useEffect-}-from-"react";-import-{-FaEye,-FaEyeSlash,-FaSpinner,-FaGoogle-}-from-"react-icons/fa";-const-AuthPage-=-()-=>-{-const-[isLogin,-setIsLogin]-=-useState(true);-const-[showPassword,-setShowPassword]-=-useState(false);-const-[loading,-setLoading]-=-useState(false);-const-[formData,-setFormData]-=-useState({-email:-"",-password:-"",-confirmPassword:-""-});-const-[errors,-setErrors]-=-useState({});-const-[suggestions,-setSuggestions]-=-useState([]);-const-emailDomains-=-["@gmail.com",-"@yahoo.com",-"@outlook.com",-"@hotmail.com"];-const-validateEmail-=-(email)-=>-{-const-regex-=-/^[^\s@]+@[^\s@]+\.[^\s@]+$/;-return-regex.test(email);-};-const-handleGoogleLogin-=-()-=>-{-setLoading(true);-//-Simulate-Google-login-setTimeout(()-=>-{-setLoading(false);-console.log("Google-login-clicked");-},-2000);-};-const-handleInputChange-=-(e)-=>-{-const-{-name,-value-}-=-e.target;-setFormData((prev)-=>-({-...prev,-[name]:-value-}));-if-(name-===-"email"-&&-!value.includes("@"))-{-const-suggestedEmails-=-emailDomains.map((domain)-=>-value-+-domain);-setSuggestions(suggestedEmails);-}-else-{-setSuggestions([]);-}-validateField(name,-value);-};-const-validateField-=-(name,-value)-=>-{-const-newErrors-=-{-...errors-};-switch-(name)-{-case-"email":-if-(!value)-{-newErrors.email-=-"Email-is-required";-}-else-if-(!validateEmail(value))-{-newErrors.email-=-"Invalid-email-format";-}-else-{-delete-newErrors.email;-}-break;-case-"password":-if-(!value)-{-newErrors.password-=-"Password-is-required";-}-else-if-(value.length-<-8)-{-newErrors.password-=-"Password-must-be-at-least-8-characters";-}-else-{-delete-newErrors.password;-}-break;-case-"confirmPassword":-if-(!isLogin-&&-value-!==-formData.password)-{-newErrors.confirmPassword-=-"Passwords-do-not-match";-}-else-{-delete-newErrors.confirmPassword;-}-break;-default:-break;-}-setErrors(newErrors);-};-const-handleSubmit-=-async-(e)-=>-{-e.preventDefault();-if-(Object.keys(errors).length-===-0)-{-setLoading(true);-//-Simulate-API-call-await-new-Promise((resolve)-=>-setTimeout(resolve,-2000));-setLoading(false);-console.log("Form-submitted:",-formData);-}-};-const-selectSuggestion-=-(suggestion)-=>-{-setFormData((prev)-=>-({-...prev,-email:-suggestion-}));-setSuggestions([]);-validateField("email",-suggestion);-};-return-(-<div-className="min-h-screen-flex-items-center-justify-center-bg-gradient-to-br-from-blue-500-to-purple-600-p-4-animate-gradient-x">-<div-className="bg-white-rounded-xl-shadow-2xl-w-full-max-w-md-p-8-transform-hover:scale-105-transition-all-duration-300-ease-in-out-backdrop-blur-lg-bg-opacity-95">-<div-className="flex-justify-center-mb-8">-<button-onClick={()-=>-setIsLogin(true)}-className={`px-6-py-2-rounded-l-lg-transition-all-duration-300-transform-relative-overflow-hidden-${-isLogin-?-"bg-blue-600-text-white-shadow-lg"-:-"bg-gray-200-text-gray-700-hover:bg-gray-300"-}-before:absolute-before:top-0-before:left-0-before:w-full-before:h-full-before:bg-green-500-before:transform-before:translate-x-[-100%]-before:transition-transform-before:duration-300-hover:before:translate-x-0-before:z-[-1]`}->-<span-className="relative-z-10">Login</span>-</button>-<button-onClick={()-=>-setIsLogin(false)}-className={`px-6-py-2-rounded-r-lg-transition-all-duration-300-transform-relative-overflow-hidden-${-!isLogin-?-"bg-blue-600-text-white-shadow-lg"-:-"bg-gray-200-text-gray-700-hover:bg-gray-300"-}-before:absolute-before:top-0-before:left-0-before:w-full-before:h-full-before:bg-green-500-before:transform-before:translate-x-[-100%]-before:transition-transform-before:duration-300-hover:before:translate-x-0-before:z-[-1]`}->-<span-className="relative-z-10">Register</span>-</button>-</div>-<form-onSubmit={handleSubmit}-className="space-y-6">-<div-className="relative-transform-transition-all-duration-300-hover:translate-y-[-2px]">-<label-htmlFor="email"-className="block-text-sm-font-medium-text-gray-700-mb-1"->-Email-</label>-<input-type="email"-id="email"-name="email"-value={formData.email}-onChange={handleInputChange}-className={`w-full-px-4-py-2-rounded-lg-border-${errors.email-?-"border-red-500"-:-"border-gray-300"}-focus:ring-2-focus:ring-blue-500-focus:border-transparent-transition-all-duration-300-hover:shadow-md`}-aria-invalid={errors.email-?-"true"-:-"false"}-aria-describedby={errors.email-?-"email-error"-:-undefined}-/>-{errors.email-&&-(-<p-id="email-error"-className="mt-1-text-sm-text-red-600-animate-bounce"-role="alert"->-{errors.email}-</p>-)}-{suggestions.length->-0-&&-(-<div-className="absolute-z-10-w-full-bg-white-border-border-gray-300-rounded-lg-mt-1-shadow-lg-transform-transition-all-duration-300">-{suggestions.map((suggestion)-=>-(-<button-key={suggestion}-type="button"-onClick={()-=>-selectSuggestion(suggestion)}-className="w-full-text-left-px-4-py-2-hover:bg-gray-100-transition-colors-duration-150"->-{suggestion}-</button>-))}-</div>-)}-</div>-<div-className="relative-transform-transition-all-duration-300-hover:translate-y-[-2px]">-<label-htmlFor="password"-className="block-text-sm-font-medium-text-gray-700-mb-1"->-Password-</label>-<div-className="relative">-<input-type={showPassword-?-"text"-:-"password"}-id="password"-name="password"-value={formData.password}-onChange={handleInputChange}-className={`w-full-px-4-py-2-rounded-lg-border-${errors.password-?-"border-red-500"-:-"border-gray-300"}-focus:ring-2-focus:ring-blue-500-focus:border-transparent-transition-all-duration-300-hover:shadow-md`}-aria-invalid={errors.password-?-"true"-:-"false"}-aria-describedby={errors.password-?-"password-error"-:-undefined}-/>-<button-type="button"-onClick={()-=>-setShowPassword(!showPassword)}-className="absolute-right-3-top-1/2-transform--translate-y-1/2-text-gray-500-hover:text-gray-700-transition-colors-duration-150"-aria-label={showPassword-?-"Hide-password"-:-"Show-password"}->-{showPassword-?-<FaEyeSlash-/>-:-<FaEye-/>}-</button>-</div>-{errors.password-&&-(-<p-id="password-error"-className="mt-1-text-sm-text-red-600-animate-bounce"-role="alert"->-{errors.password}-</p>-)}-</div>-{!isLogin-&&-(-<div-className="relative-transform-transition-all-duration-300-hover:translate-y-[-2px]">-<label-htmlFor="confirmPassword"-className="block-text-sm-font-medium-text-gray-700-mb-1"->-Confirm-Password-</label>-<input-type="password"-id="confirmPassword"-name="confirmPassword"-value={formData.confirmPassword}-onChange={handleInputChange}-className={`w-full-px-4-py-2-rounded-lg-border-${errors.confirmPassword-?-"border-red-500"-:-"border-gray-300"}-focus:ring-2-focus:ring-blue-500-focus:border-transparent-transition-all-duration-300-hover:shadow-md`}-aria-invalid={errors.confirmPassword-?-"true"-:-"false"}-aria-describedby={-errors.confirmPassword-?-"confirm-password-error"-:-undefined-}-/>-{errors.confirmPassword-&&-(-<p-id="confirm-password-error"-className="mt-1-text-sm-text-red-600-animate-bounce"-role="alert"->-{errors.confirmPassword}-</p>-)}-</div>-)}-<button-type="submit"-disabled={loading-||-Object.keys(errors).length->-0}-className="w-full-bg-blue-600-text-white-py-2-rounded-lg-hover:bg-blue-700-focus:ring-4-focus:ring-blue-300-transition-all-duration-300-disabled:opacity-50-disabled:cursor-not-allowed-flex-items-center-justify-center-transform-hover:scale-105-hover:shadow-xl"->-{loading-?-(-<FaSpinner-className="animate-spin-mr-2"-/>-)-:-isLogin-?-(-"Login"-)-:-(-"Register"-)}-</button>-<div-className="relative-flex-items-center-justify-center-my-4">-<div-className="border-t-border-gray-300-flex-grow"></div>-<span-className="px-4-text-gray-500-text-sm">OR</span>-<div-className="border-t-border-gray-300-flex-grow"></div>-</div>-<button-type="button"-onClick={handleGoogleLogin}-className="w-full-bg-white-text-gray-700-py-2-px-4-rounded-lg-border-border-gray-300-hover:bg-gray-50-focus:ring-4-focus:ring-gray-200-transition-all-duration-300-flex-items-center-justify-center-space-x-2-transform-hover:scale-105-hover:shadow-xl"->-<FaGoogle-className="text-red-600"-/>-<span>Continue-with-Google</span>-</button>-</form>-</div>-</div>-);-};-export-default-AuthPage;-can-i-change-this-to-make-the-button-login-below-to-be-cover-on-another-color-when-i-hover-it