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.
HTML Code
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
<div class="mt-3 text-center">
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-gray-100 dark:bg-gray-700">
<svg class="h-6 w-6 text-gray-600 dark:text-gray-200" 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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white mt-4">Session Expiring</h3>
<div class="mt-2 px-7 py-3">
<p class="text-sm text-gray-500 dark:text-gray-300">Your session is about to expire. You will be logged out automatically.</p>
</div>
<div class="items-center px-4 py-3">
<button id="ok-btn" class="px-4 py-2 bg-gray-600 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-600">OK</button>
</div>
</div>
</div>
</div>Composants associés
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.
Composant d’alerte de délai d’expiration de session
Un composant d’alerte de temporisation de session conçu dans un style brutaliste avec une esthétique brute et audacieuse, un contraste élevé et des effets réactifs. Ce composant prend en charge le thème sombre à l’aide du style CSS Tailwind et utilise des images d’espace réservé de picsum.photos et randomuser.me.
Alerte de délai d’expiration de la session
Un composant d’alerte de délai d’expiration de session réactif avec prise en charge du thème sombre, conçu avec une esthétique minimaliste/plate utilisant des couleurs pastel. Il présente une mise en page épurée avec une typographie claire et des repères visuels subtils pour l’interaction avec l’utilisateur, adaptés aux environnements de tableau de bord.