Componenti Avviso di timeout sessione Componente di avviso timeout sessione

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.

Anteprima

Codice HTML

<div class="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-90 dark:bg-gray-900">
    <div class="max-w-sm w-full bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg p-5">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Session Timeout Warning</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-4">Your session is about to expire due to inactivity. Please take action to continue your shopping experience. </p>
        <div class="flex justify-between">
            <button class="bg-gray-300 dark:bg-gray-600 text-gray-900 dark:text-gray-100 font-semibold py-2 px-4 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition">Stay Logged In</button>
            <button class="bg-red-500 dark:bg-red-700 text-white font-semibold py-2 px-4 rounded hover:bg-red-600 dark:hover:bg-red-800 transition">Log Out</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.

Aperto

Componente di avviso timeout sessione

Un complesso componente di avviso di timeout della sessione in stile neumorfico per l'e-commerce, caratterizzato da una combinazione di colori monocromatica e un design reattivo con supporto per la modalità scura.

Aperto

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.

Aperto