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

Warnung bei Sitzungs-Timeout

Eine reaktionsschnelle Session Timeout Alert Component mit 3D-Design, triadischem Farbschema und Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS.

Offen

Warnung bei Sitzungs-Timeout

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

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