Christmas Login Page - Copy this React, Tailwind Component to your project

Import React from 'react'; import { signInWithPopup, GoogleAuthProvider } from 'firebase/auth'; import { auth } from '../firebase'; import { useNavigate } from 'react router dom'; function Login() { const navigate = useNavigate(); const signInWithGoogle = () => { const provider = new GoogleAuthProvider(); signInWithPopup(auth, provider) .then((result) => { // User signed in console.log(result.user); navigate('/'); // Redirect to home or another page after login }).catch((error) => { // Handle Errors here. console.error(error); }); }; return ( <div className="flex justify center items center h screen"> <button onClick={signInWithGoogle} className="bg blue 500 hover:bg blue 700 text white font bold py 2 px 4 rounded" > Sign in with Google </button> </div> ); } export default Login; enchace its so its look like a login page for a Christmas card creator website!