Success Messages Component

<div class="min-h-screen bg-gradient-to-br from-purple-50 via-pink-50 to-indigo-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-8 flex items-center justify-center">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 md:p-8 max-w-sm w-full transform transition-all duration-300 hover:scale-105 ease-in-out">
    <div class="flex flex-col items-center justify-center space-y-4">
      <div class="relative flex items-center justify-center w-16 h-16 rounded-full bg-green-100 dark:bg-green-700 transform transition-transform duration-500 ease-in-out scale-0 animate-scaleIn">
        <svg class="w-10 h-10 text-green-500 dark:text-green-200" 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="M5 13l4 4L19 7"></path>
        </svg>
      </div>
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center">Success!</h2>
      <p class="text-gray-600 dark:text-gray-300 text-center text-sm">
        Your action was completed successfully. We appreciate your patience.
      </p>
      <button class="px-6 py-2 rounded-full bg-purple-200 dark:bg-purple-600 text-purple-800 dark:text-white font-semibold hover:bg-purple-300 dark:hover:bg-purple-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-opacity-75">
        Continue
      </button>
    </div>
  </div>
</div>

<style>
  @keyframes scaleIn {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    60% {
      transform: scale(1.1);
      opacity: 1;
    }
    100% {
      transform: scale(1);
    }
  }

  .animate-scaleIn {
    animation: scaleIn 0.6s ease-out forwards;
  }
</style>