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-Alarm" - Aquarell/Grafik

Eine komplexe, reaktionsschnelle Komponente für die Zeitüberschreitung von Sitzungen für den E-Commerce mit einem Aquarell-/künstlerischen Design mit einem Regenbogenfarbschema mit Farbverlauf und Unterstützung des Dunkelmodus. Enthält Optionen zum Verlängern oder Abmelden.

Offen

Warnung bei Skeuomorphic Session Timeout

Eine einfache, Skeuomorphe Komponente für Sitzungs-Timeout-Warnungen mit Graustufen, die für Blog-/Content-Websites entwickelt wurde. Es umfasst reaktionsschnelles Design und Unterstützung für den Dunkelmodus.

Offen

Komponente "Sitzungs-Timeout-Warnung"

Eine einfache, reaktionsschnelle Komponente für Sitzungs-Timeout-Benachrichtigungen mit einem mehrfarbigen Verlaufshintergrund, die für Event- und Konferenz-Websites entwickelt wurde. Inklusive Unterstützung für den Dunkelmodus.

Offen