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

Warnung bei Sitzungs-Timeout

Eine einfache Warnungskomponente für die Zeitüberschreitung von Sitzungen im Dunkelmodus für E-Commerce-Websites, die mit Pastellfarben und Reaktionsfähigkeit unter Verwendung von TailwindCSS gestaltet wurde.

Vorschau

HTML-Code 

<div class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center p-4">
  <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-xl max-w-sm w-full border border-pink-300">
    <h3 class="text-lg font-bold text-pink-200 mb-4">Session expiring soon!</h3>
    <p class="text-gray-300 text-sm mb-4">Your session will time out in 60 seconds. Please save your work or extend your session.</p>
    <div class="flex justify-end space-x-2">
      <button class="px-4 py-2 bg-gray-700 dark:bg-gray-800 text-gray-200 rounded hover:bg-gray-600 dark:hover:bg-gray-700 text-sm transition duration-300">Cancel</button>
      <button class="px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600 text-sm transition duration-300">Extend Session</button>
    </div>
  </div>
</div>

Verwandte Komponenten

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

Warnung bei Sitzungs-Timeout

Retro/Vintage Session Timeout Alert Component mit Erdtönen, responsivem Design und Unterstützung für dunkle Themen.

Offen