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

Komponente "Sitzungs-Timeout-Warnung"

Eine Session Timeout Alert Component in einem brutalistischen Stil mit roher, kühner Ästhetik, hohem Kontrast und reaktionsschnellen Effekten. Diese Komponente unterstützt dunkle Designs mit Tailwind CSS-Stil und verwendet Platzhalterbilder aus picsum.photos und randomuser.me.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg text-center p-6 max-w-md w-full">
        <img src="https://picsum.photos/200/100?random=1" alt="Session Timeout" class="w-full h-24 rounded-md object-cover mb-4">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Session Timeout Warning</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Your session is about to expire due to inactivity. Please save your work and log in again to continue.</p>
        <div class="flex justify-between mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-400 dark:border-gray-600">
            <p class="text-base font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
        </div>
        <div class="flex space-x-4">
            <button class="px-4 py-2 bg-blue-600 text-white font-bold rounded hover:bg-blue-700 transition duration-200">Stay Logged In</button>
            <button class="px-4 py-2 bg-red-600 text-white font-bold rounded hover:bg-red-700 transition duration-200">Log Out</button>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Sitzungs-Timeout-Warnung"

Eine komplexe, reaktionsschnelle Komponente für die Warnung vor Zeitüberschreitungen für Behörden/öffentliche Dienste mit einem organischen/von der Natur inspirierten Design mit coolen Neutraltönen. Enthält einen Countdown-Timer, Optionen zum Verlängern oder Abmelden und vollständige Unterstützung des Dunkelmodus.

Offen

Komponente "Sitzungs-Timeout-Warnung"

Eine einfache, reaktionsschnelle und monochromatische Komponente für Sitzungs-Timeout-Alarme mit Neon-/Leuchteffekten, die für Bildungs-/Lernplattformen entwickelt wurde. Enthält Unterstützung für den Dunkelmodus.

Offen

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