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 complejo y receptivo con un diseño minimalista en escala de grises, adecuado para sitios web comerciales e incluye soporte para temas oscuros.
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.
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.