generate a template and script in vue 3 using firebase/auth SDK version 9 signInWithPhoneNumber verifyRecaptcha. use tailwindcss. template has input for phone and input for otp code appears after submitting phone number.

ChatGPTphoneAuth.vue

<!-- Here is a template and script for a Vue 3 component that uses Firebase/Auth SDK version 9 to implement 
phone number authentication with reCAPTCHA verification: -->
<template>
  <div class="container mx-auto">
    <form @submit.prevent="submitPhoneNumber" class="bg-white p-6 rounded-lg shadow-md">
      <label class="block font-medium text-gray-700 mb-2">
        Phone Number
      </label>
      <input
        v-model="phoneNumber"
        type="text"
        class="border rounded-lg p-2 w-full"
        placeholder="Enter your phone number"
      />
      <button
        class="bg-blue-500 text-white py-2 px-4 rounded-lg mt-4 hover:bg-blue-600"
        type="submit"
      >
        Submit
      </button>
    </form>
    <form v-if="showOTPInput" @submit.prevent="submitOTP" class="bg-white p-6 rounded-lg shadow-md mt-4">
      <label class="block font-medium text-gray-700 mb-2">
        OTP Code
      </label>
      <input
        v-model="otpCode"
        type="text"
        class="border rounded-lg p-2 w-full"
        placeholder="Enter the OTP code"
      />
      <button
        class="bg-blue-500 text-white py-2 px-4 rounded-lg mt-4 hover:bg-blue-600"
        type="submit"
      >
        Verify
      </button>
    </form>
  </div>
</template>

<script>
import { createAuth } from "@firebase/auth-compat";
import firebase from "firebase/app";

export default {
  data() {
    return {
      phoneNumber: "",
      otpCode: "",
      showOTPInput: false,
      recaptchaVerifier: null
    };
  },
  methods: {
    async submitPhoneNumber() {
      try {
        this.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
          "recaptcha-container",
          {
            size: "invisible"
          }
        );
        const confirmationResult = await firebase
          .auth()
          .signInWithPhoneNumber(this.phoneNumber, this.recaptchaVerifier);
        this.showOTPInput = true;
        // Save confirmationResult on the component's data object for later use
        this.confirmationResult = confirmationResult;
      } catch (error) {
        console.error(error);
      }
    },
    async submitOTP() {
      try {
        const { user } = await this.confirmationResult.confirm(this.otpCode);
        console.log("Phone number authentication successful", user);
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

<style>
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/ut