Composants
Alerte de délai d’expiration de la session
Composant d’alerte de délai d’expiration de session - Arc-en-ciel neumorphe
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.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-red-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4 font-sans">
<div class="relative w-full max-w-sm mx-auto p-6 rounded-3xl shadow-xl neumorphic-rainbow-light dark:neumorphic-rainbow-dark md:max-w-md lg:max-w-lg">
<div class="flex justify-center mb-6">
<div class="w-20 h-20 rounded-full flex items-center justify-center neumorphic-icon-light dark:neumorphic-icon-dark">
<svg class="w-10 h-10 text-red-500 transition-colors duration-300 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.542 2.768-1.542 3.533 0l3.057 6.164a4.5 4.5 0 01-.815 4.795L10 18.067l-5.025-4.009a4.5 4.5 0 01-.815-4.795l3.057-6.164z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
<h2 class="text-center text-3xl font-extrabold text-gray-800 mb-4 bg-clip-text text-transparent neumorphic-rainbow-text-light dark:neumorphic-rainbow-text-dark transition-colors duration-300">
Session Timeout
</h2>
<p class="text-center text-lg text-gray-700 mb-8 dark:text-gray-300 transition-colors duration-300">
Your session is about to expire due to inactivity.
</p>
<div class="flex justify-around space-x-4">
<button class="flex-1 py-3 px-4 rounded-xl text-center text-lg font-semibold neumorphic-button-light dark:neumorphic-button-dark neumorphic-text-button-light dark:neumorphic-text-button-dark transition-all duration-300 hover:scale-105 active:scale-95 leading-none">
<span class="block">Extend Session</span>
<span class="block text-sm opacity-75"> (5:00)</span>
</button>
<button class="flex-1 py-3 px-4 rounded-xl text-center text-lg font-semibold neumorphic-button-light dark:neumorphic-button-dark neumorphic-text-button-light dark:neumorphic-text-button-dark transition-all duration-300 hover:scale-105 active:scale-95 leading-none">
Log Out
</button>
</div>
<p class="text-center text-sm text-gray-500 mt-8 dark:text-gray-400 transition-colors duration-300">
For your security, we automatically log you out after inactivity.
</p>
</div>
<style>
.neumorphic-rainbow-light {
background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
box-shadow: 10px 10px 20px #c7c7c7, -10px -10px 20px #ffffff, inset 0 0 0 #f0f0f0, inset 0 0 0 #e0e0e0;
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.dark .neumorphic-rainbow-dark {
background: linear-gradient(145deg, #2b2b2b, #202020);
box-shadow: 10px 10px 20px #1a1a1a, -10px -10px 20px #313131, inset 0 0 0 #2b2b2b, inset 0 0 0 #202020;
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.neumorphic-icon-light {
background: linear-gradient(145deg, #e0e0e0, #f0f0f0);
box-shadow: inset 5px 5px 10px #c7c7c7, inset -5px -5px 10px #ffffff;
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.dark .neumorphic-icon-dark {
background: linear-gradient(145deg, #202020, #2b2b2b);
box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #313131;
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.neumorphic-button-light {
background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
box-shadow: 7px 7px 14px #c2c2c2, -7px -7px 14px #ffffff;
}
.neumorphic-button-light:hover {
box-shadow: 5px 5px 10px #c2c2c2, -5px -5px 10px #ffffff;
}
.neumorphic-button-light:active {
box-shadow: inset 5px 5px 10px #c2c2c2, inset -5px -5px 10px #ffffff;
}
.dark .neumorphic-button-dark {
background: linear-gradient(145deg, #2b2b2b, #202020);
box-shadow: 7px 7px 14px #1a1a1a, -7px -7px 14px #313131;
}
.dark .neumorphic-button-dark:hover {
box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #313131;
}
.dark .neumorphic-button-dark:active {
box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #313131;
}
.neumorphic-rainbow-text-light {
background-image: linear-gradient(to right, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #6366f1, #a855f7);
}
.dark .neumorphic-rainbow-text-dark {
background-image: linear-gradient(to right, #fee2e2, #fcd34d, #fef08a, #dcfce7, #bfdbfe, #c7d2fe, #e9d5ff);
}
.neumorphic-text-button-light {
background-clip: text;
color: transparent;
background-image: linear-gradient(to right, #dc2626, #ea580c, #ca8a04, #16a34a, #2563eb, #4f46e5, #9333ea);
}
.dark .neumorphic-text-button-dark {
background-clip: text;
color: transparent;
background-image: linear-gradient(to right, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #6366f1, #a855f7);
}
</style>
</div>Composants associés
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 - 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é.
Alerte de délai d’expiration de la session
Un composant d’alerte de délai d’expiration de session inspiré de la 3D avec un