Success Messages Component

<div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 dark:shadow-2xl">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50/50" alt="Avatar" class="w-12 h-12 rounded-full mr-3 shadow-md" />
        <h2 class="font-bold text-lg text-gray-800 dark:text-gray-200">Success Message Title</h2>
    </div>
    <p class="text-gray-600 dark:text-gray-400">
        Your operation was successful! This message confirms that your changes were saved properly.
    </p>
    <div class="mt-4">
        <img src="https://picsum.photos/300/200" alt="Success Illustration" class="w-full h-auto rounded-lg shadow-md" />
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        .dark\:bg-gray-800 {
            background-color: #1F2937;
        }
        .dark\:text-gray-200 {
            color: #E5E7EB;
        }
        .dark\:text-gray-400 {
            color: #9CA3AF;
        }
        .dark\:shadow-2xl {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }
    }
</style>