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 receptivo con diseño 3D, combinación de colores triádica y compatibilidad con el modo oscuro mediante Tailwind CSS.

Vista previa

Código HTML

<div class="fixed inset-0 bg-gray-900 bg-opacity-50 dark:bg-opacity-75 flex items-center justify-center p-4">
  <div class="relative bg-gradient-to-br from-blue-500 to-purple-600 dark:from-gray-700 dark:to-gray-900 text-white rounded-lg shadow-lg p-6 max-w-sm w-full transform transition-all duration-300 scale-100 hover:scale-105">
    <div class="absolute inset-0 bg-white bg-opacity-10 dark:bg-opacity-5 rounded-lg pointer-events-none"></div>
    <div class="relative">
      <h2 class="text-2xl font-bold mb-4 text-shadow">Session Timeout</h2>
      <p class="mb-6 text-shadow-sm">Your session is about to expire. Please save any unsaved work.</p>
      <div class="flex justify-end space-x-4">
        <button class="bg-white text-blue-600 dark:text-gray-800 px-4 py-2 rounded-md font-semibold shadow hover:bg-gray-200 dark:hover:bg-gray-300 transition duration-300">Stay Logged In</button>
        <button class="bg-red-500 text-white px-4 py-2 rounded-md font-semibold shadow hover:bg-red-600 transition duration-300">Log Out</button>
      </div>
    </div>
  </div>
</div>

<style>
.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.text-shadow-sm {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
</style>

Componentes relacionados

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.

Abrir

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.

Abrir

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.

Abrir