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.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg text-center p-6 max-w-md w-full">
<img src="https://picsum.photos/200/100?random=1" alt="Session Timeout" class="w-full h-24 rounded-md object-cover mb-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Session Timeout Warning</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Your session is about to expire due to inactivity. Please save your work and log in again to continue.</p>
<div class="flex justify-between mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-400 dark:border-gray-600">
<p class="text-base font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
</div>
<div class="flex space-x-4">
<button class="px-4 py-2 bg-blue-600 text-white font-bold rounded hover:bg-blue-700 transition duration-200">Stay Logged In</button>
<button class="px-4 py-2 bg-red-600 text-white font-bold rounded hover:bg-red-700 transition duration-200">Log Out</button>
</div>
</div>
</div>Composants associés
Composant d’alerte de délai d’expiration de session
Un composant minimaliste d’alerte de délai d’expiration de session pour les sites Web de commerce électronique, conçu avec une palette de couleurs monochromatique et réactif avec la prise en charge du thème sombre à l’aide de Tailwind CSS.
Alerte de délai d’expiration de la session
Composant d’alerte de délai d’expiration de session avec style Microinteractions, effets réactifs et 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 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.