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
Alerte de délai d’expiration de la session
Un composant d’alerte de délai d’expiration de session simple en mode sombre pour les sites de commerce électronique, conçu avec des couleurs pastel et une réactivité à l’aide de TailwindCSS.
Alerte de délai d’expiration de la session
Un composant d’alerte de délai d’expiration de session Material Design simple et monochrome pour les réseaux sociaux, avec un design réactif et une prise en charge du thème sombre.
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.