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.
Código HTML
<div class="fixed inset-0 flex items-center justify-center bg-white dark:bg-gray-800 z-50 rounded-lg shadow-lg transition-all duration-300 p-5">
<div class="bg-pastel-green rounded-md p-4 shadow-md transition-transform transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Session Timeout Alert</h2>
<p class="mt-2 text-gray-600 dark:text-gray-400">Your session is about to expire. Would you like to extend it?</p>
<div class="flex justify-around mt-4">
<button class="bg-blue-500 text-white dark:bg-blue-700 rounded-md px-4 py-2 transition-colors hover:bg-blue-600 dark:hover:bg-blue-600">Extend</button>
<button class="bg-red-500 text-white dark:bg-red-700 rounded-md px-4 py-2 transition-colors hover:bg-red-600 dark:hover:bg-red-600">Log Out</button>
</div>
</div>
<div class="absolute bottom-2 right-2">
<img src="https://picsum.photos/50/50" alt="Illustrative Image" class="rounded-full border-2 border-white dark:border-gray-800 shadow-lg" />
</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 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.
Componente de alerta de tiempo de espera de sesión - Tema Art Deco Candy
Un componente de alerta de tiempo de espera de sesión simple y receptivo con un diseño inspirado en Art Deco, que utiliza colores dulces brillantes. Optimizado para sitios de documentación/wiki, con soporte para modo oscuro.
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.