Componente di avviso timeout sessione
Un componente di avviso di timeout della sessione reattivo con uno stile di progettazione 3D, supporto per il tema scuro e l'incorporazione di immagini segnaposto.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-md p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/46.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow-md">
<div class="ml-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Session Timeout Alert</h2>
<p class="text-gray-600 dark:text-gray-400">Your session will expire soon.</p>
</div>
</div>
<div class="mb-4">
<img src="https://picsum.photos/400/200" alt="Alert Image" class="w-full h-32 object-cover rounded-lg shadow-md">
</div>
<p class="text-gray-600 dark:text-gray-400">To maintain security, please save your work and log back in soon.</p>
<div class="mt-6 flex justify-between">
<button class="px-4 py-2 text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 rounded-lg shadow-md">Stay Logged In</button>
<button class="px-4 py-2 text-gray-700 bg-gray-300 hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 rounded-lg shadow-md">Log Out</button>
</div>
</div>
</div>Componenti correlati
Componente di avviso timeout sessione - Neumorfismo Candy
Un componente di avviso di timeout sessione reattivo con uno stile di progettazione neumorfismo, che utilizza una combinazione di colori caramelle/dolci. Le caratteristiche includono il supporto della modalità oscura e un timer per il conto alla rovescia per i marchi di moda/bellezza.
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.
Componente di avviso timeout sessione
Un componente di avviso di timeout di sessione semplice, reattivo e compatibile con la modalità oscura con un'estetica industriale e silenziosa, adatto per sistemi di prenotazione e prenotazione.