Компонент всплывающих уведомлений

<div class="fixed bottom-5 right-5 z-50 space-y-4">
  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
    <div class="flex items-center space-x-3">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
      <div>
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Notification Title</h4>
        <p class="text-gray-600 dark:text-gray-400">This is a brief message for a toast notification.</p>
      </div>
    </div>
    <div class="mt-2 flex justify-between items-center">
      <span class="text-sm text-gray-500 dark:text-gray-300">5 mins ago</span>
      <button class="text-red-500 hover:text-red-600">Dismiss</button>
    </div>
  </div>

  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
    <div class="flex items-center space-x-3">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
      <div>
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Notification</h4>
        <p class="text-gray-600 dark:text-gray-400">Here is another message for your consideration.</p>
      </div>
    </div>
    <div class="mt-2 flex justify-between items-center">
      <span class="text-sm text-gray-500 dark:text-gray-300">10 mins ago</span>
      <button class="text-red-500 hover:text-red-600">Dismiss</button>
    </div>
  </div>

  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
    <div class="flex items-center space-x-3">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
      <div>
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Important Alert</h4>
        <p class="text-gray-600 dark:text-gray-400">This is an important alert that requires your attention.</p>
      </div>
    </div>
    <div class="mt-2 flex justify-between items-center">
      <span class="text-sm text-gray-500 dark:text-gray-300">15 mins ago</span>
      <button class="text-red-500 hover:text-red-600">Dismiss</button>
    </div>
  </div>
</div>