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

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.

Vorschau

HTML-Code 

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
    <!-- Close Button -->
    <button class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200">
      <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>

    <!-- Icon -->
    <div class="flex justify-center mb-4">
      <div class="p-3 bg-yellow-200 dark:bg-yellow-600 rounded-full">
        <svg class="h-8 w-8 text-yellow-700 dark:text-yellow-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
      </div>
    </div>

    <!-- Title and Description -->
    <h2 class="text-xl font-semibold text-center text-gray-800 dark:text-white mb-2">Session Timeout</h2>
    <p class="text-gray-600 dark:text-gray-300 text-center mb-6">
      Your session is about to expire. Please save your work and log in again.
    </p>

    <!-- Progress Bar (Simulated) -->
    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-6">
      <div class="bg-pink-400 dark:bg-pink-600 h-2.5 rounded-full" style="width: 75%;"></div>
    </div>

    <!-- Action Buttons -->
    <div class="flex space-x-4">
      <button class="flex-1 px-4 py-2 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white rounded-md hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors duration-200">
        Save Draft
      </button>
      <button class="flex-1 px-4 py-2 bg-purple-400 dark:bg-purple-600 text-white rounded-md hover:bg-purple-500 dark:hover:bg-purple-700 transition-colors duration-200">
        Log Out
      </button>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Sitzungs-Timeout-Warnung"

Eine minimalistische Komponente für Sitzungs-Timeout-Benachrichtigungen für E-Commerce-Websites, die mit einem monochromatischen Farbschema gestaltet und mit Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS reagiert.

Offen

Komponente "Sitzungs-Timeout-Warnung"

Eine reaktionsschnelle Komponente für Sitzungs-Timeout-Alarme, die im Glassmorphism-Stil entwickelt wurde und für dunkle Themen geeignet ist. Es verfügt über ein pastellfarbenes Farbschema, glasartige, durchscheinende Elemente mit Unschärfeeffekten und einige interaktive Funktionen wie einen Countdown-Timer und Aktionstasten.

Offen

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.

Offen