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.
HTML Code
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-500 bg-opacity-60 dark:bg-gray-900 dark:bg-opacity-75 font-sans">
<div class="w-full max-w-sm p-6 rounded-lg shadow-xl bg-orange-100 dark:bg-stone-800 text-stone-800 dark:text-stone-100 border-t-4 border-orange-500 dark:border-orange-600 transform transition-all duration-300 ease-in-out scale-100 hover:scale-105 hover:shadow-2xl">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl md:text-2xl font-bold text-orange-700 dark:text-orange-400">Session Expiring Soon!</h3>
<svg class="w-8 h-8 text-orange-600 dark:text-orange-500" 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 16zm-1-8a1 1 0 10-2 0v4a1 1 0 102 0v-4zm-1-3a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd"></path>
</svg>
</div>
<p class="text-sm md:text-base mb-6 text-stone-700 dark:text-stone-200 leading-relaxed">
Your session is about to expire due to inactivity. Please extend your session to continue browsing.
</p>
<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
<button class="flex-1 px-5 py-2 rounded-md font-semibold text-sm bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white shadow-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
Extend Session
</button>
<button class="flex-1 px-5 py-2 rounded-md font-semibold text-sm bg-gray-300 hover:bg-gray-400 dark:bg-stone-700 dark:hover:bg-stone-600 text-stone-700 dark:text-stone-200 shadow-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75">
Log Out
</button>
</div>
</div>
</div>Composants associés
Alerte de délai d’expiration de la session
Composant d’alerte de délai d’expiration de session rétro/vintage avec des tons de terre, un design réactif et la prise en charge du thème sombre.
Composant d’alerte de délai d’expiration de session - Aquarelle/Artistique
Un composant complexe et réactif d’alerte de délai d’expiration de session pour le commerce électronique, avec un design aquarelle/artistique avec une palette de couleurs arc-en-ciel dégradée et la prise en charge du mode sombre. Comprend des options pour prolonger 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.