CCHub Logo CCHub Tailwind Collection
Komponenten Warnung bei Sitzungs-Timeout Komponente "Sitzungs-Timeout-Warnung"

Komponente "Sitzungs-Timeout-Warnung"

Eine Komponente für Sitzungs-Timeout-Alarme, die unter Berücksichtigung von Mikrointeraktionen entwickelt wurde und ein Graustufen-Farbschema und ein responsives Design mit Unterstützung für dunkle Designs verwendet. Ideal für E-Commerce-Plattformen, um Benutzer über den Ablauf von Sitzungen zu informieren.

Vorschau

HTML-Code 

<div class="fixed top-0 left-0 right-0 z-50 p-4 flex justify-between items-center bg-white dark:bg-gray-800 flex-col sm:flex-row rounded-lg shadow-lg">
    <div class="flex items-center space-x-3">
        <img src="https://picsum.photos/50/50" alt="Session Timeout" class="w-12 h-12 rounded-full shadow-lg" />
        <div class="text-gray-900 dark:text-white">
            <h2 class="text-lg font-semibold">Session Timeout</h2>
            <p class="text-sm">Your session is about to expire. Please take action to continue shopping.</p>
        </div>
    </div>
    <div class="flex space-x-2 mt-4 sm:mt-0">
        <button class="px-4 py-2 font-semibold text-white bg-gray-900 rounded-md transition duration-300 ease-in-out hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Stay Logged In</button>
        <button class="px-4 py-2 font-semibold text-gray-900 border border-gray-900 rounded-md transition duration-300 ease-in-out hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:text-white dark:border-white dark:hover:bg-gray-700">Log Out</button>
    </div>
</div>

Verwandte Komponenten

Warnung bei Sitzungs-Timeout

Eine einfache Warnungskomponente für die Zeitüberschreitung von Sitzungen im Dunkelmodus für E-Commerce-Websites, die mit Pastellfarben und Reaktionsfähigkeit unter Verwendung von TailwindCSS gestaltet wurde.

Offen

Warnung bei Sitzungs-Timeout

Session Timeout Alert Component mit Microinteractions-Stil, responsiven Effekten und Unterstützung für dunkle Themen.

Offen

Komponente "Sitzungs-Timeout-Warnung"

Eine Komponente für die Warnung bei der Zeitüberschreitung der Sitzung, die eine ansprechende Animation auslöst. Es verfügt über ein responsives Design, das für Dashboards mit pastellfarbenem Farbschema und Unterstützung für dunkle Themen geeignet ist. Es enthält interaktive Elemente, mit denen Benutzer ihre Sitzung verlängern oder sich abmelden können.

Offen