Composant d’alerte de délai d’expiration de session
Un composant réactif d’alerte de délai d’expiration de session doté d’un style de conception 3D, d’une prise en charge du thème sombre et d’une intégration d’images d’espace réservé.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-md p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/46.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow-md">
<div class="ml-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Session Timeout Alert</h2>
<p class="text-gray-600 dark:text-gray-400">Your session will expire soon.</p>
</div>
</div>
<div class="mb-4">
<img src="https://picsum.photos/400/200" alt="Alert Image" class="w-full h-32 object-cover rounded-lg shadow-md">
</div>
<p class="text-gray-600 dark:text-gray-400">To maintain security, please save your work and log back in soon.</p>
<div class="mt-6 flex justify-between">
<button class="px-4 py-2 text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 rounded-lg shadow-md">Stay Logged In</button>
<button class="px-4 py-2 text-gray-700 bg-gray-300 hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 rounded-lg shadow-md">Log Out</button>
</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 au design minimaliste et plat avec une palette de couleurs rétro/vintage, avec une mise en page simple, une réactivité totale et une prise en charge du mode sombre pour les sites de blog/contenu.
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.
Composant d’alerte de délai d’expiration de session
Un composant d’alerte de délai d’expiration de session réactif conçu pour le commerce électronique avec des animations attrayantes et un thème sombre. Il comporte un message d’avertissement, un compte à rebours et des options pour prolonger la session ou se déconnecter.