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.
Código HTML
<div class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center p-4">
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-xl max-w-sm w-full border border-pink-300">
<h3 class="text-lg font-bold text-pink-200 mb-4">Session expiring soon!</h3>
<p class="text-gray-300 text-sm mb-4">Your session will time out in 60 seconds. Please save your work or extend your session.</p>
<div class="flex justify-end space-x-2">
<button class="px-4 py-2 bg-gray-700 dark:bg-gray-800 text-gray-200 rounded hover:bg-gray-600 dark:hover:bg-gray-700 text-sm transition duration-300">Cancel</button>
<button class="px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600 text-sm transition duration-300">Extend Session</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 receptivo diseñado con estilo glassmorphism y adecuado para temas oscuros. Cuenta con una combinación de colores pastel, elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque y algunas funciones interactivas como un temporizador de cuenta regresiva y botones de acción.
Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión que desencadena una animación atractiva. Cuenta con un diseño responsivo, adecuado para tableros con un esquema de color pastel y soporte de temas oscuros. Incluye elementos interactivos, lo que permite a los usuarios ampliar su sesión o cerrar sesión.
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.