Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión diseñado teniendo en cuenta las microinteracciones, que utiliza un esquema de color en escala de grises y un diseño receptivo con soporte para temas oscuros. Ideal para que las plataformas de comercio electrónico alerten a los usuarios sobre la caducidad de la sesión.
Código HTML
<div class="fixed top-0 left-0 right-0 z-50 p-4 flex justify-between items-center bg-white dark:bg-gray-800 flex-col sm:flex-row rounded-lg shadow-lg">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/50/50" alt="Session Timeout" class="w-12 h-12 rounded-full shadow-lg" />
<div class="text-gray-900 dark:text-white">
<h2 class="text-lg font-semibold">Session Timeout</h2>
<p class="text-sm">Your session is about to expire. Please take action to continue shopping.</p>
</div>
</div>
<div class="flex space-x-2 mt-4 sm:mt-0">
<button class="px-4 py-2 font-semibold text-white bg-gray-900 rounded-md transition duration-300 ease-in-out hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Stay Logged In</button>
<button class="px-4 py-2 font-semibold text-gray-900 border border-gray-900 rounded-md transition duration-300 ease-in-out hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:text-white dark:border-white dark:hover:bg-gray-700">Log Out</button>
</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 con un estilo de diseño 3D, compatibilidad con temas oscuros e incorporación de imágenes de marcador de posición.
Componente de alerta de tiempo de espera de sesión - Acuarela/Artístico
Un componente de alerta de tiempo de espera de sesión complejo y receptivo para comercio electrónico, con un diseño artístico/acuarela con un esquema de colores del arco iris degradado y compatibilidad con el modo oscuro. Incluye opciones para ampliar o cerrar sesión.
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.