Componente di avviso timeout sessione
Un componente di avviso di timeout della sessione progettato in uno stile brutalista con un'estetica cruda e audace, contrasto elevato ed effetti reattivi. Questo componente supporta il tema scuro utilizzando lo stile CSS Tailwind e utilizza immagini segnaposto da picsum.photos e randomuser.me.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg text-center p-6 max-w-md w-full">
<img src="https://picsum.photos/200/100?random=1" alt="Session Timeout" class="w-full h-24 rounded-md object-cover mb-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Session Timeout Warning</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Your session is about to expire due to inactivity. Please save your work and log in again to continue.</p>
<div class="flex justify-between mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-400 dark:border-gray-600">
<p class="text-base font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
</div>
<div class="flex space-x-4">
<button class="px-4 py-2 bg-blue-600 text-white font-bold rounded hover:bg-blue-700 transition duration-200">Stay Logged In</button>
<button class="px-4 py-2 bg-red-600 text-white font-bold rounded hover:bg-red-700 transition duration-200">Log Out</button>
</div>
</div>
</div>Componenti correlati
Avviso di timeout sessione
Un semplice componente monocromatico di avviso di timeout della sessione di Material Design per i social media, con design reattivo e supporto per temi scuri.
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.
Componente di avviso timeout sessione
Un componente di avviso di timeout sessione reattivo progettato per l'e-commerce con animazioni accattivanti e un tema scuro. È dotato di un messaggio di avviso, un timer per il conto alla rovescia e opzioni per estendere la sessione o disconnettersi.