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

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.

Vorschau

HTML-Code 

<div class="fixed inset-0 flex items-center justify-center bg-white dark:bg-gray-800 z-50 rounded-lg shadow-lg transition-all duration-300 p-5">
    <div class="bg-pastel-green rounded-md p-4 shadow-md transition-transform transform hover:scale-105">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Session Timeout Alert</h2>
        <p class="mt-2 text-gray-600 dark:text-gray-400">Your session is about to expire. Would you like to extend it?</p>
        <div class="flex justify-around mt-4">
            <button class="bg-blue-500 text-white dark:bg-blue-700 rounded-md px-4 py-2 transition-colors hover:bg-blue-600 dark:hover:bg-blue-600">Extend</button>
            <button class="bg-red-500 text-white dark:bg-red-700 rounded-md px-4 py-2 transition-colors hover:bg-red-600 dark:hover:bg-red-600">Log Out</button>
        </div>
    </div>
    <div class="absolute bottom-2 right-2">
        <img src="https://picsum.photos/50/50" alt="Illustrative Image" class="rounded-full border-2 border-white dark:border-gray-800 shadow-lg" />
    </div>
</div>

Verwandte Komponenten

Komponente für Sitzungs-Timeout-Alarm - Art Deco Candy Theme

Eine einfache, reaktionsschnelle Komponente für Sitzungs-Timeout-Alarme mit einem vom Art Deco inspirierten Design mit leuchtenden Bonbonfarben. Optimiert für Dokumentations-/Wiki-Seiten, mit Unterstützung für den Dunkelmodus.

Offen

Komponente für Sitzungs-Timeout-Warnung - Neumorphism Candy

Eine reaktionsschnelle Komponente für Sitzungs-Timeout-Warnungen mit einem Neumorphismus-Designstil unter Verwendung eines Bonbon-/Süß-Farbschemas. Zu den Funktionen gehören die Unterstützung des Dunkelmodus und ein Countdown-Timer für Mode-/Beauty-Marken.

Offen

Warnung bei Sitzungs-Timeout

Eine reaktionsschnelle Komponente für Sitzungs-Timeout-Alarme mit Unterstützung für dunkle Themen, die mit einer minimalistischen/flachen Ästhetik in Pastellfarben gestaltet ist. Es zeichnet sich durch ein klares Layout mit klarer Typografie und subtilen visuellen Hinweisen für die Benutzerinteraktion aus und eignet sich für Dashboard-Umgebungen.

Offen