Success Messages Component

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
  <div class="relative bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-8 max-w-md w-full overflow-hidden transform transition-all duration-500 hover:scale-105">
    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-purple-600 to-pink-500 opacity-75 rounded-3xl transform -rotate-3 translate-x-2 translate-y-2 group-hover:rotate-0 group-hover:translate-x-0 group-hover:translate-y-0 transition-all duration-500"></div>
    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-blue-500 to-green-400 opacity-75 rounded-3xl transform rotate-3 -translate-x-2 -translate-y-2 group-hover:rotate-0 group-hover:translate-x-0 group-hover:translate-y-0 transition-all duration-500"></div>
    
    <div class="relative z-10 flex flex-col items-center justify-center text-center">
      <div class="mb-6 flex items-center justify-center space-x-2">
        <div class="relative">
          <img src="https://i.pravatar.cc/150?img=1" alt="Avatar 1" class="w-16 h-16 rounded-full ring-4 ring-purple-400 object-cover shadow-lg">
          <span class="absolute bottom-0 right-0 block h-4 w-4 rounded-full ring-2 ring-white bg-green-500"></span>
        </div>
        <div class="relative">
          <img src="https://i.pravatar.cc/150?img=2" alt="Avatar 2" class="w-16 h-16 rounded-full ring-4 ring-pink-400 object-cover shadow-lg">
          <span class="absolute bottom-0 right-0 block h-4 w-4 rounded-full ring-2 ring-white bg-green-500"></span>
        </div>
        <div class="relative">
          <img src="https://i.pravatar.cc/150?img=3" alt="Avatar 3" class="w-16 h-16 rounded-full ring-4 ring-blue-400 object-cover shadow-lg">
          <span class="absolute bottom-0 right-0 block h-4 w-4 rounded-full ring-2 ring-white bg-green-500"></span>
        </div>
      </div>
      
      <h2 class="text-4xl font-extrabold text-gray-900 dark:text-white mb-4 leading-tight" style="text-shadow: 2px 2px 4px rgba(0,0,0,0.2);">
        Success!
      </h2>
      <p class="text-gray-700 dark:text-gray-300 mb-6 text-lg">
        Your post was successfully shared with your network. Expect lots of engagement!
      </p>
      
      <div class="w-full flex flex-col space-y-4">
        <button class="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition-all duration-300 text-lg">
          View Post
        </button>
        <button class="w-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition-all duration-300 text-lg">
          Share Again
        </button>
      </div>

      <div class="mt-8 text-sm text-gray-500 dark:text-gray-400">
        <p>You've reached <span class="font-semibold text-purple-600">1,234 friends</span> this time!</p>
        <div class="relative pt-1">
          <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-fuchsia-200 dark:bg-fuchsia-800">
            <div style="width: 80%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-fuchsia-500 dark:bg-fuchsia-400"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>