Success Messages 组件

<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800 border-t-4 border-purple-600 dark:border-purple-500">
    <div class="flex items-center justify-center mb-4">
      <svg class="w-16 h-16 text-purple-600 dark:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
    </div>
    <h2 class="mb-3 text-2xl font-bold text-center text-gray-800 dark:text-gray-100">Thank You for Your Support!</h2>
    <p class="mb-6 text-center text-gray-600 dark:text-gray-300">
      Your generous contribution has been successfully processed and will make a significant impact on our mission.
    </p>
    <div class="flex justify-center">
      <a href="#" class="inline-flex items-center px-6 py-3 text-base font-medium text-white bg-purple-600 rounded-md shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:bg-purple-700 dark:hover:bg-purple-600">
        <svg class="w-5 h-5 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v9a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
          </path>
        </svg>
        Back to Homepage
      </a>
    </div>
    <p class="mt-6 text-sm text-center text-gray-500 dark:text-gray-400">
      A confirmation email has been sent to your inbox. Please contact us if you have any questions.
    </p>
  </div>
</div>