Avviso di timeout sessione
Un componente di avviso di timeout della sessione reattivo con design 3D, combinazione di colori triadica e supporto per la modalità oscura utilizzando Tailwind CSS.
Codice HTML
<div class="fixed inset-0 bg-gray-900 bg-opacity-50 dark:bg-opacity-75 flex items-center justify-center p-4">
<div class="relative bg-gradient-to-br from-blue-500 to-purple-600 dark:from-gray-700 dark:to-gray-900 text-white rounded-lg shadow-lg p-6 max-w-sm w-full transform transition-all duration-300 scale-100 hover:scale-105">
<div class="absolute inset-0 bg-white bg-opacity-10 dark:bg-opacity-5 rounded-lg pointer-events-none"></div>
<div class="relative">
<h2 class="text-2xl font-bold mb-4 text-shadow">Session Timeout</h2>
<p class="mb-6 text-shadow-sm">Your session is about to expire. Please save any unsaved work.</p>
<div class="flex justify-end space-x-4">
<button class="bg-white text-blue-600 dark:text-gray-800 px-4 py-2 rounded-md font-semibold shadow hover:bg-gray-200 dark:hover:bg-gray-300 transition duration-300">Stay Logged In</button>
<button class="bg-red-500 text-white px-4 py-2 rounded-md font-semibold shadow hover:bg-red-600 transition duration-300">Log Out</button>
</div>
</div>
</div>
</div>
<style>
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.text-shadow-sm {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
</style>
Componenti correlati
Componente di avviso timeout sessione
Un componente di avviso di timeout di sessione complesso e reattivo, progettato con uno stile tipografico svizzero / internazionale minimale e una combinazione di colori Candy/Sweet brillante, adatto per piattaforme di lavoro e carriera. Include il supporto per la modalità oscura ed elementi interattivi.
Componente di avviso timeout sessione
Un componente di avviso di timeout della sessione che attiva un'animazione coinvolgente. Presenta un design reattivo, adatto per dashboard con una combinazione di colori pastello e supporto per temi scuri. Include elementi interattivi, che consentono agli utenti di estendere la sessione o di disconnettersi.
Componente di avviso timeout sessione
Un componente di avviso di timeout sessione semplice e reattivo con uno sfondo sfumato multicolore, progettato per siti Web di eventi e conferenze. Include il supporto per la modalità scura.