E-commerce Monochromatic Alert

<div class="p-4 sm:p-6 bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 dark:border-blue-700 text-blue-800 dark:text-blue-100 shadow-md rounded-lg mx-auto max-w-sm sm:max-w-md md:max-w-xl flex items-start justify-between transition-all duration-300 ease-in-out transform hover:scale-[1.005]">
  <div class="flex items-center">
    <svg class="h-6 w-6 text-blue-500 dark:text-blue-400 mr-3 animate-bounce-in" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <div class="text-sm sm:text-base font-medium leading-relaxed">
      <p class="mb-1 font-semibold">Item Added to Cart!</p>
      <p class="text-blue-700 dark:text-blue-200">Your selected product has been successfully added.</p>
    </div>
  </div>
  <button class="ml-4 p-2 transition-all duration-200 ease-linear rounded-md hover:bg-blue-200 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700 group">
    <svg class="h-5 w-5 text-blue-600 dark:text-blue-300 group-hover:rotate-90 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
    </svg>
  </button>
</div>

<style>
  @keyframes bounce-in {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    50% {
      transform: scale(1.1);
      opacity: 1;
    }
    100% {
      transform: scale(1);
    }
  }

  .animate-bounce-in {
    animation: bounce-in 0.5s ease-out both;
  }
</style>