<div class="p-3 rounded-xl text-sm relative bg-white/95 backdrop-blur-md text-gray-900 shadow-xl ring-1 ring-black/5 transition transform duration-200 flex border-l-4 border-blue-500" 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 items-center">
    <div class="flex-shrink-0 rounded-md p-1.5 flex items-center justify-center bg-blue-100 text-blue-600">
      <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-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"></path>
      </svg>
    </div>
    
    <div class="flex-grow flex flex-col justify-center min-w-0">
      <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="flex-shrink-0 p-0.5 -m-0.5 rounded-md opacity-75 hover:opacity-100 cursor-pointer text-gray-500 hover:bg-gray-100 transition-colors" 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>