Tailwind CSS Reset Password Component

<div class="flex flex-col items-center justify-center bg-green-100" x-data="{ email: '', successMsg: '', errorMsg: '' }">
  <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-center text-green-600 mb-6">Reset Password</h2>
    <form @submit.prevent="submitForm">
      <div class="mb-4">
        <label class="block text-gray-700 font-bold mb-2" for="email">
          Email Address
        </label>
        <input
          class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          id="email" type="email" placeholder="Email Address" required x-model="email">
      </div>
      <div class="flex items-center justify-between">
        <button
          class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
          type="submit">
          Reset Password
        </button>
        <a class="inline-block align-baseline font-bold text-sm text-green-500 hover:text-green-800"
          href="#">Back to Login</a>
      </div>
      <p class="text-green-600 mt-4" x-text="successMsg"></p>
      <p class="text-red-600 mt-4" x-text="errorMsg"></p>
    </form>
  </div>
</div>

 function resetPassword(email) {
    // Here we can make an API call to reset the user's password using the provided email address
    // If the password reset was successful, return true
    // If the password reset failed, return false
    // In this example, we'll just return true to simulate a successful password reset
    return true;
  }

  Alpine.data('resetPasswordForm', () => ({
    email: '',
    successMsg: '',
    errorMsg: '',
    async submitForm() {
      this.successMsg = '';
      this.errorMsg = '';
      const success = await resetPassword(this.email);
      if (success) {
        this.successMsg = 'Password reset instructions sent to your email!';
      } else {
        this.errorMsg = 'Failed to reset password. Please try again.';
      }
    }
  }));