Neumorphic_Charity_Success_Message

<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans">

  <div class="max-w-md w-full rounded-2xl p-6 md:p-8
    bg-gray-100 shadow-xl-light dark:bg-gray-800 dark:shadow-xl-dark
    text-center border border-gray-200 dark:border-gray-700">

    <div class="mb-6">
      <svg class="mx-auto h-20 w-20 text-indigo-500 mb-4"
        fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
      </svg>
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-2
        drop-shadow-sm dark:drop-shadow-lg">Donation Successful!</h2>
      <p class="text-lg text-gray-600 dark:text-gray-300">
        Thank you for your generous contribution.
      </p>
    </div>

    <p class="text-gray-500 dark:text-gray-400 mb-6 leading-relaxed">
      Your support will make a significant impact on our cause and help us continue our vital work.
      We are deeply grateful for your kindness.
    </p>

    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
      <button type="button" class="w-full py-3 px-6 rounded-xl
        bg-indigo-500 text-white font-semibold text-lg
        shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark
        hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75
        transform transition-transform duration-200 ease-in-out active:scale-95">
        Share Your Impact
      </button>
      <button type="button" class="w-full py-3 px-6 rounded-xl
        bg-gray-200 text-gray-700 font-semibold text-lg
        shadow-neumorphic-button-reverse-light dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphic-button-reverse-dark
        hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75
        transform transition-transform duration-200 ease-in-out active:scale-95">
        View Receipt
      </button>
    </div>

  </div>

  <style>
    .shadow-xl-light {
      box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;
    }
    .dark .shadow-xl-dark {
      box-shadow: 10px 10px 20px #212121, -10px -10px 20px #3f3f3f;
    }

    .shadow-neumorphic-button-light {
      box-shadow: 6px 6px 12px #9a9a9a, -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-button-dark {
      box-shadow: 6px 6px 12px #1c1c1c, -6px -6px 12px #444444;
    }

    .shadow-neumorphic-button-reverse-light {
      box-shadow: inset 6px 6px 12px #9a9a9a, inset -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-button-reverse-dark {
      box-shadow: inset 6px 6px 12px #1c1c1c, inset -6px -6px 12px #444444;
    }
  </style>

</div>