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
Un componente di avviso di timeout di sessione reattivo e compatibile con tema scuro con stile Glassmorphism, toni della Terra e layout complesso utilizzando Tailwind CSS. Presenta effetti di vetro smerigliato, sfocatura e molteplici elementi interattivi adatti a un portfolio.
Componente di avviso timeout sessione
Un componente minimalista di avviso di timeout della sessione per i siti Web di e-commerce, progettato con una combinazione di colori monocromatica e reattivo con supporto per temi scuri utilizzando Tailwind CSS.
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.