Alerte de délai d’expiration de la session
Un composant d’alerte de délai d’expiration de session réactif avec conception 3D, schéma de couleurs triadique et prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<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>Composants associés
Composant d’alerte de délai d’expiration de session
Un composant d’alerte de délai d’expiration de session complexe et réactif avec une conception monospace/développeur, un schéma en noir et blanc et une couleur d’accentuation vive, adapté aux plates-formes éducatives. Comprend la prise en charge du mode sombre et un compte à rebours.
Alerte de délai d’expiration de la session
Composant d’alerte de délai d’expiration de session rétro/vintage avec des tons de terre, un design réactif et la prise en charge du thème sombre.
Alerte de délai d’expiration de la session
Un composant d’alerte de délai d’expiration de session inspiré de la 3D avec un