HTML 代码
<div class="bg-white dark:bg-gray-800 border-2 border-red-600 dark:border-red-400 rounded-lg p-6 max-w-md mx-auto mt-10 shadow-lg">
<div class="flex items-center mb-4">
<img class="w-16 h-16 rounded-full border-2 border-red-600 dark:border-red-400 mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Error Avatar">
<h2 class="text-red-600 dark:text-red-400 font-bold text-xl">Error Title</h2>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-3">
This is a sample error message that describes the issue encountered. It is intentionally raw and bold to reflect the brutalism design style.
</p>
<img class="w-full rounded-md mb-4" src="https://picsum.photos/400/200?random=1" alt="Random placeholder image">
<div class="flex justify-between items-center">
<button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Dismiss</button>
<span class="text-gray-500 dark:text-gray-400 text-sm">Timestamp: 20:15</span>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border-2 border-yellow-600 dark:border-yellow-400 rounded-lg p-6 max-w-md mx-auto mt-5 shadow-lg">
<div class="flex items-center mb-4">
<img class="w-16 h-16 rounded-full border-2 border-yellow-600 dark:border-yellow-400 mr-4" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Warning Avatar">
<h2 class="text-yellow-600 dark:text-yellow-400 font-bold text-xl">Warning Title</h2>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-3">
This is a warning message that might help you avoid a potential issue. It’s meant to catch your attention with a bold approach.
</p>
<img class="w-full rounded-md mb-4" src="https://picsum.photos/400/200?random=2" alt="Random placeholder image">
<div class="flex justify-between items-center">
<button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Acknowledge</button>
<span class="text-gray-500 dark:text-gray-400 text-sm">Timestamp: 20:15</span>
</div>
</div>