HTML 代码
<div class="flex flex-col space-y-4 p-6">
<div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
<div class="flex-1">
<p class="text-lg font-semibold text-black dark:text-white">Alert Title</p>
<p class="text-gray-700 dark:text-gray-300">This is an alert message describing the issue at hand.</p>
</div>
<button class="bg-red-600 text-white p-2 rounded-md hover:bg-red-500 dark:bg-red-700 dark:hover:bg-red-600">Dismiss</button>
</div>
</div>
<div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
<div class="flex-1">
<p class="text-lg font-semibold text-black dark:text-white">Information Alert</p>
<p class="text-gray-700 dark:text-gray-300">This is a piece of information to keep you updated.</p>
</div>
<button class="bg-blue-600 text-white p-2 rounded-md hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">Okay</button>
</div>
</div>
<div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
<div class="flex-1">
<p class="text-lg font-semibold text-black dark:text-white">Success Alert</p>
<p class="text-gray-700 dark:text-gray-300">Your operation was successful! Great job!</p>
</div>
<button class="bg-green-600 text-white p-2 rounded-md hover:bg-green-500 dark:bg-green-700 dark:hover:bg-green-600">Close</button>
</div>
</div>
</div>