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.
Codice HTML
<div class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center p-4">
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-xl max-w-sm w-full border border-pink-300">
<h3 class="text-lg font-bold text-pink-200 mb-4">Session expiring soon!</h3>
<p class="text-gray-300 text-sm mb-4">Your session will time out in 60 seconds. Please save your work or extend your session.</p>
<div class="flex justify-end space-x-2">
<button class="px-4 py-2 bg-gray-700 dark:bg-gray-800 text-gray-200 rounded hover:bg-gray-600 dark:hover:bg-gray-700 text-sm transition duration-300">Cancel</button>
<button class="px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600 text-sm transition duration-300">Extend Session</button>
</div>
</div>
</div>Componenti correlati
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.
Componente di avviso timeout sessione
Un componente di avviso di timeout sessione reattivo progettato con lo stile glassmorphism e adatto per temi scuri. Presenta una combinazione di colori pastello, elementi traslucidi simili al vetro smerigliato con effetti di sfocatura e alcune funzioni interattive come un timer per il conto alla rovescia e pulsanti di azione.
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.