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

Komponente "Sitzungs-Timeout-Warnung"

Eine reaktionsschnelle Komponente für die Benachrichtigung über die Zeitüberschreitung von Sitzungen mit einem 3D-Designstil, Unterstützung für dunkle Designs und der Integration von Platzhalterbildern.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="w-full max-w-md p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all hover:scale-105">
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow-md">
            <div class="ml-4">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Session Timeout Alert</h2>
                <p class="text-gray-600 dark:text-gray-400">Your session will expire soon.</p>
            </div>
        </div>
        <div class="mb-4">
            <img src="https://picsum.photos/400/200" alt="Alert Image" class="w-full h-32 object-cover rounded-lg shadow-md">
        </div>
        <p class="text-gray-600 dark:text-gray-400">To maintain security, please save your work and log back in soon.</p>
        <div class="mt-6 flex justify-between">
            <button class="px-4 py-2 text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 rounded-lg shadow-md">Stay Logged In</button>
            <button class="px-4 py-2 text-gray-700 bg-gray-300 hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 rounded-lg shadow-md">Log Out</button>
        </div>
    </div>
</div>

Verwandte Komponenten

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

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

Warnung bei Sitzungs-Timeout

Eine einfache, monochromatische Material Design-Session-Timeout-Alarmkomponente für soziale Medien mit responsivem Design und Unterstützung für dunkle Themen.

Offen