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 complexe et réactif d’alerte de délai d’expiration de session conçu avec un style typographique suisse / international minimal et une palette de couleurs vives Candy/Sweet, adapté aux plateformes d’emploi et de carrière. Comprend la prise en charge du mode sombre et des éléments interactifs.
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.
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é.