<div class="p-3 rounded-xl text-sm relative bg-gray-300 dark:bg-gray-900 transition transform duration-200 ps-4" data-controller="dismiss" data-dismiss-delay-value="4000" data-transition-enter-from="opacity-0 translate-y-2 scale-95" data-transition-enter-to="opacity-100 translate-y-0 scale-100" data-transition-leave-from="opacity-100 translate-y-0 scale-100" data-transition-leave-to="opacity-0 translate-y-2 scale-95">
  <div class="flex gap-3 w-full">
    <div class="flex-grow flex flex-col">
      <div class="flex-1 font-semibold opacity-90">Toast Notification</div>
      <div class="flex-1 opacity-70">This is a toast notification with some content.</div>
    </div>
    
    <div class="opacity-75 hover:opacity-100 cursor-pointer" data-action="click->dismiss#hide">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="size-4">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
      </svg>
    </div>
  </div>
</div>