CENTERED WITH SINGLE ACTION

gistfile1.txt

       <BraveDialog
        ref="bravedialog2"
          class="bg-black/80 backdrop-blur-sm dark:bg-black/80 justify-center flex fixed bottom-0 left-0 right-0 top-0"
          dialogclasses="rounded-lg bg-white dark:bg-slate-800 dark:text-white shadow-lg mx-5 lg:w-1/3 flex-col flex my-auto "
          :visibility="false"
        >
          <div class="text-center ">
              <div class="inline-block mt-5">
                <div
                  class="h-14 w-14 rounded-full bg-green-200 flex justify-center content-center"
                >
            
                  <i
                    class="bi bi-check2 text-green-500 m-auto text-2xl"
                  ></i>
                </div>
              </div>
              <div class="p-5">
                <h1 class="text-lg font-semibold text-gray-900 mb-2 dark:text-white">
                 Payment Successful
                </h1>
                <p class="text-gray-500 text-sm dark:text-gray-400">
                  Thank you for your payment. We will be in touch with you soon.
                </p>
              </div>
              <div class="mx-5 mb-5">
                <button
                  @click="$refs.bravedialog2.hide()"
                  type="button"
                  class="text-white bg-blue-700 border border-gray-300 focus:outline-none hover:bg-blue-800
                   focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2 dark:bg-gray-700 
                   dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:border-gray-600 
                   dark:focus:ring-gray-700
                   min-w-full "
                >
                  Go back to the Dashboard
                </button>
              </div>
            </div>
        </BraveDialog>