Composant d’alerte de délai d’expiration de session
Un composant d’alerte de délai d’expiration de session conçu pour les micro-interactions, utilisant un jeu de couleurs en niveaux de gris et un design réactif avec prise en charge du thème sombre. Idéal pour les plateformes de commerce électronique pour alerter les utilisateurs de l’expiration de la session.
HTML Code
<div class="fixed top-0 left-0 right-0 z-50 p-4 flex justify-between items-center bg-white dark:bg-gray-800 flex-col sm:flex-row rounded-lg shadow-lg">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/50/50" alt="Session Timeout" class="w-12 h-12 rounded-full shadow-lg" />
<div class="text-gray-900 dark:text-white">
<h2 class="text-lg font-semibold">Session Timeout</h2>
<p class="text-sm">Your session is about to expire. Please take action to continue shopping.</p>
</div>
</div>
<div class="flex space-x-2 mt-4 sm:mt-0">
<button class="px-4 py-2 font-semibold text-white bg-gray-900 rounded-md transition duration-300 ease-in-out hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Stay Logged In</button>
<button class="px-4 py-2 font-semibold text-gray-900 border border-gray-900 rounded-md transition duration-300 ease-in-out hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:text-white dark:border-white dark:hover:bg-gray-700">Log Out</button>
</div>
</div>Composants associés
Composant d’alerte de délai d’expiration de session - Aquarelle/Artistique
Un composant complexe et réactif d’alerte de délai d’expiration de session pour le commerce électronique, avec un design aquarelle/artistique avec une palette de couleurs arc-en-ciel dégradée et la prise en charge du mode sombre. Comprend des options pour prolonger ou se déconnecter.
Composant d’alerte de délai d’expiration de session
Un composant complexe et réactif d’alerte de délai d’expiration de session pour les sites Web gouvernementaux/de service public, avec un design inspiré de l’agriculture et de la nature avec des neutres froids. Comprend un compte à rebours, des options pour prolonger ou se déconnecter, et une prise en charge complète du mode sombre.
RetroSessionTimeoutAlert
Un composant d’alerte de délai d’expiration de session à thème rétro avec des tons de terre, conçu pour les sites de blogs/contenus. Dispose d’un look nostalgique avec un design réactif et une prise en charge du mode sombre.