Toast 通知组件
使用 Tailwind CSS 的粗野派风格的 toast 通知组件，专为展示工作或产品的作品集而设计。该设计结合了类似的配色方案，并支持具有复杂界面的深色模式。
HTML 代码
<div class="fixed top-4 right-4 z-50 space-y-4">
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-red-500">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
<div class="flex-1">
<h2 class="font-bold text-lg">Notification Title</h2>
<p class="text-sm">This is a sample toast notification message that showcases important updates or alerts.</p>
</div>
<button class="ml-2 p-2 text-sm text-red-500 hover:bg-red-400 rounded-full transition duration-200 ease-in-out">Close</button>
</div>
</div>
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-yellow-500">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar">
<div class="flex-1">
<h2 class="font-bold text-lg">Another Notification</h2>
<p class="text-sm">This is another toast notification that provides insights or next steps for users.</p>
</div>
<button class="ml-2 p-2 text-sm text-yellow-500 hover:bg-yellow-400 rounded-full transition duration-200 ease-in-out">Close</button>
</div>
</div>
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-blue-500">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/20.jpg" alt="Avatar">
<div class="flex-1">
<h2 class="font-bold text-lg">Success Notification</h2>
<p class="text-sm">Your latest action was successful. Keep up the great work!</p>
</div>
<button class="ml-2 p-2 text-sm text-blue-500 hover:bg-blue-400 rounded-full transition duration-200 ease-in-out">Close</button>
</div>
</div>
</div>