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

Alerta de tiempo de espera de sesión

Un componente de alerta de tiempo de espera de sesión de Material Design simple y monocromático para redes sociales, con diseño responsivo y soporte para temas oscuros.

Vista previa

Código HTML

<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
    <div class="mt-3 text-center">
      <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-gray-100 dark:bg-gray-700">
        <svg class="h-6 w-6 text-gray-600 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white mt-4">Session Expiring</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-300">Your session is about to expire. You will be logged out automatically.</p>
      </div>
      <div class="items-center px-4 py-3">
        <button id="ok-btn" class="px-4 py-2 bg-gray-600 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-600">OK</button>
      </div>
    </div>
  </div>
</div>

Componentes relacionados

Alerta de tiempo de espera de sesión skeuomórfica

Un componente de alerta de tiempo de espera de sesión simple de estilo Skeuomórfico con colores en escala de grises, diseñado para sitios de blog/contenido. Incluye diseño responsivo y soporte para modo oscuro.

Abrir

Componente de alerta de tiempo de espera de sesión

Un componente de alerta de tiempo de espera de sesión receptivo diseñado para el comercio electrónico con animaciones atractivas y un tema oscuro. Cuenta con un mensaje de advertencia, un temporizador de cuenta regresiva y opciones para extender la sesión o cerrar la sesión.

Abrir

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.

Abrir