Composant d’alerte de délai d’expiration de session
Un composant d’alerte de délai d’expiration de session simple et réactif avec un arrière-plan dégradé multicolore, conçu pour les sites Web d’événements et de conférences. Inclut la prise en charge du mode sombre.
HTML Code
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 dark:bg-black dark:bg-opacity-75">
<div class="relative w-full max-w-sm p-0 rounded-2xl shadow-xl overflow-hidden
bg-gradient-to-br from-purple-500 via-pink-500 to-red-500
dark:from-purple-700 dark:via-pink-700 dark:to-red-700">
<div class="p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-xl m-0.5">
<div class="flex flex-col items-center justify-center text-center">
<svg class="w-16 h-16 mb-4 text-red-500 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
</svg>
<h3 class="text-2xl font-extrabold text-gray-900 dark:text-white mb-2">
Session Expired
</h3>
<p class="text-gray-600 dark:text-gray-300 text-base mb-6">
Your session has timed out due to inactivity. Please log in again to continue.
</p>
<div class="w-full flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
<button class="w-full px-6 py-3 rounded-full text-white font-semibold transition-all duration-300 transform
bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600
shadow-lg hover:shadow-xl dark:shadow-none">
Log In Now
</button>
<button class="w-full px-6 py-3 rounded-full font-semibold transition-all duration-300 transform
bg-gray-100 text-gray-800 hover:bg-gray-200
dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600
shadow-md hover:shadow-lg dark:shadow-none">
Cancel
</button>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant d’alerte de délai d’expiration de session - Arc-en-ciel neumorphe
Un composant Neumorphic Session Timeout Alert pour les applications de rencontres/sociales avec un schéma de couleurs arc-en-ciel dégradé. Il est réactif et prend en charge le mode sombre, incitant les utilisateurs à prolonger leur session ou à se déconnecter.
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 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.