Componente de mensajes de éxito - Bienes raíces Modo oscuro Colores de caramelo

<div class="flex items-center justify-center min-h-screen bg-gray-900 p-4 dark:bg-gray-950 font-sans">
  <div class="w-full max-w-md mx-auto bg-gradient-to-br from-pink-500 to-purple-600 rounded-lg shadow-2xl p-6 dark:from-pink-700 dark:to-purple-900 border-2 border-pink-300 dark:border-purple-600 animate-fade-in-down">
    <div class="flex flex-col items-center text-center">
      <div class="relative flex items-center justify-center w-24 h-24 rounded-full bg-gradient-to-br from-green-300 to-teal-400 mb-6 shadow-lg dark:from-green-600 dark:to-teal-800 animate-scale-in p-2">
        <svg class="w-16 h-16 text-white animate-bounce-in" 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="text-3xl sm:text-4xl font-extrabold text-white mb-3 tracking-tight leading-tight drop-shadow-lg animate-fade-in-up">
        Success!
      </h2>
      <p class="text-base sm:text-lg text-pink-100 mb-6 leading-relaxed">
        Your property listing has been successfully published and is now live for potential buyers!
      </p>

      <div class="inline-flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 w-full justify-center">
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-semibold rounded-full shadow-lg text-white bg-green-500 hover:bg-green-600 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-green-300 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-900">
          <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
            <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path>
          </svg>
          View Listing
        </a>
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-pink-200 text-base font-semibold rounded-full shadow-lg text-pink-100 bg-transparent hover:bg-pink-700 hover:border-pink-700 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:border-purple-400 dark:hover:bg-purple-800 dark:hover:border-purple-800 dark:focus:ring-purple-600">
          <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
            <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"></path>
          </svg>
          Edit Listing
        </a>
      </div>

      <p class="text-xs text-pink-200 mt-6 hidden sm:block dark:text-purple-300">
        You will receive an email confirmation shortly.
      </p>
    </div>
  </div>
</div>

<style>
  /* Simple custom keyframes for animation, can be added to a global CSS file or via PostCSS/Tailwind JIT if needed */
  @keyframes fade-in-down {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fade-in-up {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes scale-in {
    0% {
      opacity: 0;
      transform: scale(0.5);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes bounce-in {
    0%, 20%, 40%, 60%, 80%, 100% {
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
      transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
      transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
      opacity: 1;
      transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
      transform: scale3d(0.97, 0.97, 0.97);
    }
    100% {
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 0.7s ease-out forwards;
  }
  .animate-fade-in-up {
    animation: fade-in-up 0.7s ease-out 0.2s forwards;
  }
  .animate-scale-in {
    animation: scale-in 0.6s ease-out 0.1s forwards;
  }
  .animate-bounce-in {
    animation: bounce-in 1s ease-out 0.3s forwards;
  }
</style>