cschulte22

<% if flash.any? %>
  <div class="fixed inset-0 flex items-end justify-center px-4 py-6 pointer-events-none sm:p-6 sm:items-start sm:justify-end z-50" data-flash-notifications='true'>

    <% flash.each do |msg_type, msg| %>

      <div x-data="{flashVisible: false, flashType: '<%= msg_type %>'}" x-show='flashVisible' x-init="() => {flashVisible=true; setTimeout(() => {flashVisible=false}, 5000)}" class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto"
           x-transition:enter="transition ease-out duration-300"
           x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
           x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
           x-transition:leave="transition ease-out duration-100"