Art Deco Toast Notifications Component

<div class="fixed bottom-4 right-4 z-50 w-full max-w-xs pointer-events-none p-4">
  <!-- Success Toast -->
  <div class="bg-white dark:bg-zinc-800 border-2 border-green-600 dark:border-green-400 text-zinc-900 dark:text-zinc-50 font-sans shadow-lg rounded-lg overflow-hidden mb-4 transform transition-all duration-300 pointer-events-auto hover:scale-[1.02] active:scale-95 animate-fade-in-up md:animate-slide-in-right">
  <div class="flex items-center p-4 border-b-2 border-green-600 dark:border-green-400 bg-green-500 dark:bg-green-700/80">
      <svg class="w-6 h-6 text-white mr-3" 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>
      <h3 class="text-lg font-bold text-white uppercase tracking-wider">Success!</h3>
      <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-green-500 dark:bg-green-700/80 text-white hover:text-green-900 focus:ring-2 focus:ring-green-300 p-1.5 rounded-lg inline-flex h-8 w-8 transition-colors duration-200">
        <span class="sr-only">Close</span>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
    <div class="p-4">
      <p class="text-sm italic">Your article has been successfully published to the public eye. Check your dashboard for insights.</p>
    </div>
  </div>

  <!-- Error Toast -->
  <div class="bg-white dark:bg-zinc-800 border-2 border-red-600 dark:border-red-400 text-zinc-900 dark:text-zinc-50 font-sans shadow-lg rounded-lg overflow-hidden transform transition-all duration-300 pointer-events-auto hover:scale-[1.02] active:scale-95 animate-fade-in-up md:animate-slide-in-right">
    <div class="flex items-center p-4 border-b-2 border-red-600 dark:border-red-400 bg-red-500 dark:bg-red-700/80">
      <svg class="w-6 h-6 text-white mr-3" 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <h3 class="text-lg font-bold text-white uppercase tracking-wider">Error!</h3>
      <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-red-500 dark:bg-red-700/80 text-white hover:text-red-900 focus:ring-2 focus:ring-red-300 p-1.5 rounded-lg inline-flex h-8 w-8 transition-colors duration-200">
        <span class="sr-only">Close</span>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
    <div class="p-4">
      <p class="text-sm italic">Failed to publish your article. Please check your network connection or try again later.</p>
    </div>
  </div>
</div>

<style>
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slide-in-right {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out forwards;
  }

  .md\:animate-slide-in-right {
    animation: none; /* Reset for mobile */
  }

  @media (min-width: 768px) {
    .md\:animate-slide-in-right {
      animation: slide-in-right 0.5s ease-out forwards;
    }
  }
</style>