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.
HTML Code
<div class="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-90 dark:bg-gray-900">
<div class="max-w-sm w-full bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg p-5">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Session Timeout Warning</h2>
<p class="text-gray-700 dark:text-gray-300 mb-4">Your session is about to expire due to inactivity. Please take action to continue your shopping experience. </p>
<div class="flex justify-between">
<button class="bg-gray-300 dark:bg-gray-600 text-gray-900 dark:text-gray-100 font-semibold py-2 px-4 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition">Stay Logged In</button>
<button class="bg-red-500 dark:bg-red-700 text-white font-semibold py-2 px-4 rounded hover:bg-red-600 dark:hover:bg-red-800 transition">Log Out</button>
</div>
</div>
</div>
Related Components
Session Timeout Alert
A simple, dark mode session timeout alert component for e-commerce sites, designed with pastel colors and responsiveness using TailwindCSS.
Session Timeout Alert
A responsive Session Timeout Alert Component with 3D design, triadic color scheme, and dark mode support using Tailwind CSS.
Session Timeout Alert
Session Timeout Alert Component with Microinteractions style, responsive effects, and dark theme support.