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.
Código HTML
<div class="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-90 dark:bg-gray-900">
<div class="max-w-sm w-full bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg p-5">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Session Timeout Warning</h2>
<p class="text-gray-700 dark:text-gray-300 mb-4">Your session is about to expire due to inactivity. Please take action to continue your shopping experience. </p>
<div class="flex justify-between">
<button class="bg-gray-300 dark:bg-gray-600 text-gray-900 dark:text-gray-100 font-semibold py-2 px-4 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition">Stay Logged In</button>
<button class="bg-red-500 dark:bg-red-700 text-white font-semibold py-2 px-4 rounded hover:bg-red-600 dark:hover:bg-red-800 transition">Log Out</button>
</div>
</div>
</div>Componentes relacionados
Componente de alerta de tiempo de espera de sesión: arco iris neumórfico
Un componente de alerta de tiempo de espera de sesión neumórfica para aplicaciones de citas/sociales con un esquema de colores de arco iris degradado. Es responsivo y admite el modo oscuro, lo que solicita a los usuarios que amplíen su sesión o cierren sesión.
Componente de alerta de tiempo de espera de sesión
Un componente complejo de alerta de tiempo de espera de sesión de estilo neumórfico para comercio electrónico, con un esquema de color monocromático y un diseño receptivo con soporte para modo oscuro.
Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión simple, limpio y profesional diseñado para plataformas de trabajo/carrera. Utiliza un esquema de color análogo y admite el modo oscuro.