Session Timeout Alert Component
A responsive session timeout alert component designed with glassmorphism style and suitable for dark themes. It features a pastel color scheme, frosted glass-like translucent elements with blur effects, and some interactive features like a countdown timer and action buttons.
HTML Code
<div class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-70 dark:bg-gray-800 dark:bg-opacity-70">
<div class="bg-white dark:bg-gray-900 backdrop-blur-lg rounded-lg shadow-lg p-6 max-w-sm w-full">
<h2 class="text-center text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Session Timeout Alert</h2>
<p class="text-center text-gray-600 dark:text-gray-400 mb-6">Your session will expire in <span id="countdown" class="font-bold text-red-500">05:00</span> minutes.</p>
<div class="flex justify-around mt-4">
<button class="bg-gradient-to-r from-pink-400 to-blue-400 text-white font-medium py-2 px-4 rounded-lg hover:opacity-90 focus:outline-none dark:from-pink-500 dark:to-blue-500">Stay Logged In</button>
<button class="bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded-lg hover:opacity-90 focus:outline-none dark:bg-gray-600 dark:text-gray-200">Logout</button>
</div>
</div>
</div>Related Components
Session Timeout Alert Component
A Session Timeout Alert Component designed in a brutalist style with raw, bold aesthetics, high contrast, and responsive effects. This component supports dark theme using Tailwind CSS styling and utilizes placeholder images from picsum.photos and randomuser.me.
Session Timeout Alert
A simple, dark mode session timeout alert component for e-commerce sites, designed with pastel colors and responsiveness using TailwindCSS.
RetroSessionTimeoutAlert
A retro-themed session timeout alert component with earth tones, designed for blog/content sites. Features a nostalgic look with responsive design and dark mode support.