吐司通知组件
一个采用玻璃形态设计的 Toast 通知组件，具有响应式效果和黑暗主题支持。它使用 Tailwind CSS 进行样式设计，并结合 picsum.photos 的占位图像和 randomuser.me 的头像。
HTML 代码
<div class="fixed bottom-5 right-5 space-y-3">
<div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-lg border border-white border-opacity-30 shadow-lg p-4 w-80 transition transform duration-300 scale-100 hover:scale-105">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-grow">
<p class="text-white font-semibold">Notification Title</p>
<p class="text-white text-sm">This is a toast notification message to inform you about something important.</p>
</div>
</div>
<div class="flex justify-end mt-2">
<button class="bg-blue-600 text-white px-4 py-1 rounded-full hover:bg-blue-700 focus:outline-none">Action</button>
</div>
</div>
<div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-lg border border-white border-opacity-30 shadow-lg p-4 w-80 transition transform duration-300 scale-100 hover:scale-105">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-grow">
<p class="text-white font-semibold">Another Notification</p>
<p class="text-white text-sm">This is another toast notification message for your consideration.</p>
</div>
</div>
<div class="flex justify-end mt-2">
<button class="bg-blue-600 text-white px-4 py-1 rounded-full hover:bg-blue-700 focus:outline-none">Dismiss</button>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-white {
background-color: rgba(255, 255, 255, 0.1);
}
.text-white {
color: white;
}
.border-white {
border-color: rgba(255, 255, 255, 0.3);
}
}
</style>