Alert Messages: I am refreshing the page, and the alert message looks like the backend message website is not showing and the close('x') button icon is not showing

index.html

@@ -11,35 +11,8 @@
 
 <main id="main" class="w-full">
   <!-- Alert Messages -->
-  <div id="fail_email" class="hidden fixed top-6 right-6 max-w-md w-full bg-white border border-red-200 rounded-lg shadow-xl z-50 overflow-hidden">
-    <div class="flex bg-red-50 px-4 py-2">
-      <div class="flex items-center">
-        <i data-feather="alert-triangle" class="w-5 h-5 text-red-600 mr-2"></i>
-        <span class="font-medium text-red-800">Error</span>
-      </div>
-      <button onclick="removeQuery()" class="ml-auto text-red-500 hover:text-red-700 focus:outline-none">
-        <i data-feather="x" class="w-4 h-4"></i>
-      </button>
-    </div>
-    <div class="p-4 text-red-700">
-      <p>Could not send an email! Please try again later.</p>
-    </div>
-  </div>
-
-  <div id="success_email" class="hidden fixed top-6 right-6 max-w-md w-full bg-white border border-green-200 rounded-lg shadow-xl z-50 overflow-hidden">
-    <div class="flex bg-green-50 px-4 py-2">
-      <div class="flex items-center">
-        <i data-feather="check-circle" class="w-5 h-5 text-green-600 mr-2"></i>
-        <span class="font-medium text-green-800">Success</span>
-      </div>
-      <button onclick="removeQuery()" class="ml-auto text-green-500 hover:text-green-700 focus:outline-none">
-        <i data-feather="x" class="w-4 h-4"></i>
-      </button>
-    </div>
-    <div class="p-4 text-green-700">
-      <p>We have sent you an email. Please check your inbox. If you can't find it in your primary inbox, please check your Spam or Junk folder.</p>
-    </div>
-  </div>
+  <notification-component id="fail_email" class="error"></notification-component>
+  <notification-component id="success_email" class="success"></notification-component>
 <!---Twitter Card data -->
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="Magento Connector with Dynamics 365 Business Central">
@@ -349,11 +322,9 @@
   /* Make icon + text align nicely */
   .li-check i{ flex:0 0 auto; margin-top:.15rem; }
 </style>
- <script src="./js/google_js_api/jquery.min.js"></script>
-
-    <!-- <script src="./js/custom.js"></script>-->
-	
- <script type="application/javascript">
+    <script src="./js/google_js_api/jquery.min.js"></script>
+    <script src="components/notification.js"></script>
+<script type="application/javascript">
 
 
         $(document).ready(function(){

style.css

@@ -35,36 +35,7 @@ body {
     color: var(--vlc-ink);
     line-height: 1.6;
 }
-/* Alert Messages */
-#fail_email, 
-#success_email {
-  transition: all 0.3s ease;
-  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
-}
-
-#fail_email {
-  border: 1px solid #fecaca;
-}
-
-#success_email {
-  border: 1px solid #bbf7d0;
-}
-
-#fail_email .bg-red-50 {
-  background-color: #fef2f2;
-}
-
-#success_email .bg-green-50 {
-  background-color: #f0fdf4;
-}
-
-#fail_email button:hover {
-  color: #dc2626;
-}
-
-#success_email button:hover {
-  color: #16a34a;
-}
+/* Notification component styles are now in the component itself */
 h1, h2, h3, h4 {
     color: var(--vlc-navy);
     font-weight: 700;