Componentes Alerta de tiempo de espera de sesión Componente de alerta de tiempo de espera de sesión

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.

Vista previa

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

Alerta de tiempo de espera de sesión

Un componente de alerta de tiempo de espera de sesión simple y en modo oscuro para sitios de comercio electrónico, diseñado con colores pastel y capacidad de respuesta mediante TailwindCSS.

Abrir