Toasts

<div aria-live="assertive" class="pointer-events-none absolute flex items-center justify-end px-4 py-6 sm:p-6 top-0 right-0 left-0 w-full">
  <div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 dark:bg-slate-600/80">
      <div class="p-4">
        <div class="flex items-start">
          <div class="flex-shrink-0">
            <%= icon "hand-thumb-up", classes: "w-6 h-6 text-blue-500 dark:text-blue-400" %>
          </div>
          <div class="ml-3 w-0 flex-1 pt-0.5">
            <p class="text-sm font-medium text-slate-900 dark:text-white">Successfully liked!</p>
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-300">John Doe has been notified.</p>
          </div>
          <div class="ml-4 flex flex-shrink-0">
            <button type="button" class="inline-flex rounded-sm bg-white text-gray-400 hover:text-slate-500 focus:outline-none focus:ring-4 focus:ring-indigo-50 focus:ring-offset-2 dark:bg-transparent dark:focus:ring-slate-500 dark:hover:text-slate-100
            dark:focus:text-slate-100
            dark:focus-within:ring-slate-50
            dark:focus:outline-slate-500">
              <span class="sr-only">Close</span>
              <%= icon "x-mark", classes: "w-5 h-5" %>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

.pointer-events-none.absolute.flex.items-center.justify-end.px-4.py-6.sm:p-6.top-0.right-0.left-0.w-full{"aria-live" => "assertive"}
  .pointer-events-auto.w-full.max-w-sm.overflow-hidden.rounded-lg.bg-white.shadow-lg.ring-1.ring-black.ring-opacity-5{class: "dark:bg-slate-600/80"}
    .p-4
      .flex.items-start
        .flex-shrink-0
          = icon "hand-thumb-up", classes: "w-6 h-6 text-blue-500 dark:text-blue-400"
        .ml-3.w-0.flex-1{class: "pt-0.5"}
          %p.text-sm.font-medium.text-slate-900.dark:text-white Successfully liked!
          %p.mt-1.text-sm.text-slate-500.dark:text-slate-300 John Doe has been notified.
        .ml-4.flex.flex-shrink-0
          %button.inline-flex.rounded-sm.bg-white.text-gray-400.hover:text-slate-500.focus:outline-none.focus:ring-4.focus:ring-indigo-50.focus:ring-offset-2.dark:bg-transparent.dark:focus:ring-slate-500.dark:hover:text-slate-100.dark:focus:text-slate-100.dark:focus-within:ring-slate-50.dark:focus:outline-slate-500{type: "button"}
            %span.sr-only Close
            = icon "x-mark", classes: "w-5 h-5"