Alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión receptivo con soporte para temas oscuros, diseñado con una estética minimalista / plana utilizando colores pastel. Cuenta con un diseño limpio con tipografía clara y señales visuales sutiles para la interacción del usuario, adecuado para entornos de tablero.
Código HTML
<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>Componentes relacionados
Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión receptivo diseñado para el comercio electrónico con animaciones atractivas y un tema oscuro. Cuenta con un mensaje de advertencia, un temporizador de cuenta regresiva y opciones para extender la sesión o cerrar la sesión.
Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión diseñado en un estilo brutalista con una estética cruda y audaz, alto contraste y efectos receptivos. Este componente es compatible con el tema oscuro mediante el estilo CSS de Tailwind y utiliza imágenes de marcador de posición de picsum.photos y randomuser.me.
Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión minimalista para sitios web de comercio electrónico, diseñado con un esquema de color monocromático y responsivo con soporte de temas oscuros mediante Tailwind CSS.