Tailwind Toast annimation

tailwindui-toast-animation.html

  <!--
    Smoothie sliding up toast animation

    Entering: "ease-out duration-300 transition transform"
      From: "opacity-0 translate-y-2 sm:translate-y-0 sm:translate-x-2"
      To: "opacity-100 translate-y-0 sm:translate-x-0"
    Leaving: "ease-in-out duration-300 transition-all transform"
      onExit: node => node.style.maxHeight = node.getBoundingClientRect().height
      From: "opacity-100 opacity-100 mb-5 translate-y-0 sm:translate-x-0"
      onExiting={node => node.style.maxHeight = ''}
      To: "opacity-0 max-h-0 mb-0 translate-y-2 sm:translate-y-0 sm:translate-x-2"
  -->

<!-- Container element -->
<div class="fixed inset-0 flex flex-col items-start justify-end px-4 py-6 pointer-events-none sm:p-6 sm:items-end sm:justify-start">
</div>