Session Timeout Alert
A responsive session timeout alert component with dark theme support, designed with a minimalist/flat aesthetic using pastel colors. It features a clean layout with clear typography and subtle visual cues for user interaction, suitable for dashboard environments.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
<div class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
<!-- Close Button -->
<button class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<!-- Icon -->
<div class="flex justify-center mb-4">
<div class="p-3 bg-yellow-200 dark:bg-yellow-600 rounded-full">
<svg class="h-8 w-8 text-yellow-700 dark:text-yellow-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
</div>
<!-- Title and Description -->
<h2 class="text-xl font-semibold text-center text-gray-800 dark:text-white mb-2">Session Timeout</h2>
<p class="text-gray-600 dark:text-gray-300 text-center mb-6">
Your session is about to expire. Please save your work and log in again.
</p>
<!-- Progress Bar (Simulated) -->
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-6">
<div class="bg-pink-400 dark:bg-pink-600 h-2.5 rounded-full" style="width: 75%;"></div>
</div>
<!-- Action Buttons -->
<div class="flex space-x-4">
<button class="flex-1 px-4 py-2 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white rounded-md hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors duration-200">
Save Draft
</button>
<button class="flex-1 px-4 py-2 bg-purple-400 dark:bg-purple-600 text-white rounded-md hover:bg-purple-500 dark:hover:bg-purple-700 transition-colors duration-200">
Log Out
</button>
</div>
</div>
</div>
Related Components
Session Timeout Alert Component
A minimalist session timeout alert component for e-commerce websites, designed with a monochromatic color scheme and responsive with dark theme support using Tailwind CSS.
Session Timeout Alert Component
A session timeout alert component designed with microinteractions in mind, utilizing a grayscale color scheme and responsive design with dark theme support. Ideal for e-commerce platforms to alert users about session expiration.
Session Timeout Alert
Retro/Vintage Session Timeout Alert Component with Earth tones, responsive design and dark theme support.