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.
HTML Code
<div class="fixed inset-0 bg-gray-800 bg-opacity-75 z-50">
<div class="flex items-center justify-center min-h-screen">
<div class="relative bg-stone-100 p-8 rounded-lg shadow-xl max-w-sm w-full mx-4 dark:bg-stone-800">
<div class="text-center">
<svg class="mx-auto mb-4 h-12 w-12 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856a1 1 0 00.77-1.612L11.73 2.61a1 1 0 00-1.464 0L3.308 19.388a1 1 0 00.77 1.612z"></path></svg>
<h3 class="mb-5 text-lg font-bold text-stone-900 dark:text-stone-100">Session Timeout</h3>
<p class="mb-5 text-sm text-stone-700 dark:text-stone-300">Your session is about to expire. Would you like to stay logged in?</p>
<button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-amber-600 text-base font-medium text-white hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 sm:col-start-2 sm:text-sm dark:bg-amber-700 dark:hover:bg-amber-800">
Stay Logged In
</button>
</div>
</div>
</div>
</div>Composants associés
Composant d’alerte de délai d’expiration de session - Neumorphism Candy
Un composant réactif d’alerte de délai d’expiration de session avec un style de conception de neumorphisme, utilisant un schéma de couleurs bonbon/doux. Les caractéristiques incluent la prise en charge du mode sombre et un compte à rebours pour les marques de mode/beauté.
Composant d’alerte de délai d’expiration de session
Un composant d’alerte de délai d’expiration de session de style brutaliste, dynamique et réactif pour les plateformes de marché, prenant en charge le mode sombre.
Composant d’alerte de délai d’expiration de session
Un composant réactif d’alerte de délai d’expiration de session conçu avec le style glassmorphism et adapté aux thèmes sombres. Il présente une palette de couleurs pastel, des éléments translucides ressemblant à du verre dépoli avec des effets de flou, et certaines fonctionnalités interactives comme un compte à rebours et des boutons d’action.