会话超时警报组件
一个采用粗犷风格设计的会话超时警报组件，具有原始、大胆的美学、高对比度和响应式效果。该组件支持黑暗主题，使用Tailwind CSS样式，并利用picsum.photos和randomuser.me的占位符图像。
HTML 代码
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg text-center p-6 max-w-md w-full">
<img src="https://picsum.photos/200/100?random=1" alt="Session Timeout" class="w-full h-24 rounded-md object-cover mb-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Session Timeout Warning</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Your session is about to expire due to inactivity. Please save your work and log in again to continue.</p>
<div class="flex justify-between mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-400 dark:border-gray-600">
<p class="text-base font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
</div>
<div class="flex space-x-4">
<button class="px-4 py-2 bg-blue-600 text-white font-bold rounded hover:bg-blue-700 transition duration-200">Stay Logged In</button>
<button class="px-4 py-2 bg-red-600 text-white font-bold rounded hover:bg-red-700 transition duration-200">Log Out</button>
</div>
</div>
</div>