Alerta de tiempo de espera de sesión
Componente de alerta de tiempo de espera de sesión con estilo de microinteracciones, efectos responsivos y compatibilidad con temas oscuros.
Código HTML
<div class="fixed inset-0 z-50 flex items-center justify-center p-4">
<div class="relative w-full max-w-md p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Session Timeout</h3>
<button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="mt-4">
<p class="text-sm text-gray-500 dark:text-gray-300">Your session is about to expire. You will be logged out automatically soon.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-sm font-semibold text-gray-900 dark:text-white">Time remaining:</span>
<span class="text-sm font-mono text-red-600 dark:text-red-400 animation-pulse">0:59</span>
</div>
</div>
<div class="mt-6 flex justify-end space-x-3">
<button class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 focus:outline-none dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600">Cancel</button>
<button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none">Extend Session</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 que desencadena una animación atractiva. Cuenta con un diseño responsivo, adecuado para tableros con un esquema de color pastel y soporte de temas oscuros. Incluye elementos interactivos, lo que permite a los usuarios ampliar su sesión o cerrar sesión.
Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión responsivo y compatible con temas oscuros con estilo Glassmorphism, tonos tierra y diseño complejo con Tailwind CSS. Cuenta con efectos de vidrio esmerilado, desenfoque y múltiples elementos interactivos adecuados para un portafolio.
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.