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.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg text-center p-6 max-w-md w-full">
<img src="https://picsum.photos/200/100?random=1" alt="Session Timeout" class="w-full h-24 rounded-md object-cover mb-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Session Timeout Warning</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Your session is about to expire due to inactivity. Please save your work and log in again to continue.</p>
<div class="flex justify-between mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-400 dark:border-gray-600">
<p class="text-base font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
</div>
<div class="flex space-x-4">
<button class="px-4 py-2 bg-blue-600 text-white font-bold rounded hover:bg-blue-700 transition duration-200">Stay Logged In</button>
<button class="px-4 py-2 bg-red-600 text-white font-bold rounded hover:bg-red-700 transition duration-200">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 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 diseño 3D, combinación de colores triádica y compatibilidad con el modo oscuro mediante Tailwind CSS.