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.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-md p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/46.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow-md">
<div class="ml-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Session Timeout Alert</h2>
<p class="text-gray-600 dark:text-gray-400">Your session will expire soon.</p>
</div>
</div>
<div class="mb-4">
<img src="https://picsum.photos/400/200" alt="Alert Image" class="w-full h-32 object-cover rounded-lg shadow-md">
</div>
<p class="text-gray-600 dark:text-gray-400">To maintain security, please save your work and log back in soon.</p>
<div class="mt-6 flex justify-between">
<button class="px-4 py-2 text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 rounded-lg shadow-md">Stay Logged In</button>
<button class="px-4 py-2 text-gray-700 bg-gray-300 hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 rounded-lg shadow-md">Log Out</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 complejo y receptivo con un diseño monoespaciado/de desarrollador, esquema en blanco y negro y un color de acento brillante, adecuado para plataformas educativas. Incluye soporte para el modo oscuro y una cuenta regresiva.
Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión complejo y receptivo para sitios web gubernamentales/de servicios públicos, con un diseño orgánico/inspirado en la naturaleza con neutros fríos. Incluye un temporizador de cuenta regresiva, opciones para extender o cerrar sesión y soporte completo para el modo oscuro.
Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión de estilo brutalista, vibrante y receptivo para plataformas de mercado, compatible con el modo oscuro.