Avviso di timeout sessione
Un componente di avviso di timeout sessione reattivo con supporto per temi scuri, progettato con un'estetica minimalista/piatta utilizzando colori pastello. Presenta un layout pulito con una tipografia chiara e sottili spunti visivi per l'interazione con l'utente, adatto per gli ambienti dashboard.
Codice HTML
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
<div class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
<!-- Close Button -->
<button class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<!-- Icon -->
<div class="flex justify-center mb-4">
<div class="p-3 bg-yellow-200 dark:bg-yellow-600 rounded-full">
<svg class="h-8 w-8 text-yellow-700 dark:text-yellow-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
</div>
<!-- Title and Description -->
<h2 class="text-xl font-semibold text-center text-gray-800 dark:text-white mb-2">Session Timeout</h2>
<p class="text-gray-600 dark:text-gray-300 text-center mb-6">
Your session is about to expire. Please save your work and log in again.
</p>
<!-- Progress Bar (Simulated) -->
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-6">
<div class="bg-pink-400 dark:bg-pink-600 h-2.5 rounded-full" style="width: 75%;"></div>
</div>
<!-- Action Buttons -->
<div class="flex space-x-4">
<button class="flex-1 px-4 py-2 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white rounded-md hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors duration-200">
Save Draft
</button>
<button class="flex-1 px-4 py-2 bg-purple-400 dark:bg-purple-600 text-white rounded-md hover:bg-purple-500 dark:hover:bg-purple-700 transition-colors duration-200">
Log Out
</button>
</div>
</div>
</div>Componenti correlati
Avviso di timeout sessione
Un semplice componente di avviso di timeout della sessione in modalità scura per i siti di e-commerce, progettato con colori pastello e reattività utilizzando TailwindCSS.
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.
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.