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

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.

Vorschau

HTML-Code 

<div class="fixed inset-0 bg-gray-900 bg-opacity-50 dark:bg-opacity-75 flex items-center justify-center p-4">
  <div class="relative bg-gradient-to-br from-blue-500 to-purple-600 dark:from-gray-700 dark:to-gray-900 text-white rounded-lg shadow-lg p-6 max-w-sm w-full transform transition-all duration-300 scale-100 hover:scale-105">
    <div class="absolute inset-0 bg-white bg-opacity-10 dark:bg-opacity-5 rounded-lg pointer-events-none"></div>
    <div class="relative">
      <h2 class="text-2xl font-bold mb-4 text-shadow">Session Timeout</h2>
      <p class="mb-6 text-shadow-sm">Your session is about to expire. Please save any unsaved work.</p>
      <div class="flex justify-end space-x-4">
        <button class="bg-white text-blue-600 dark:text-gray-800 px-4 py-2 rounded-md font-semibold shadow hover:bg-gray-200 dark:hover:bg-gray-300 transition duration-300">Stay Logged In</button>
        <button class="bg-red-500 text-white px-4 py-2 rounded-md font-semibold shadow hover:bg-red-600 transition duration-300">Log Out</button>
      </div>
    </div>
  </div>
</div>

<style>
.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.text-shadow-sm {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
</style>

Verwandte Komponenten

Komponente "Sitzungs-Timeout-Warnung"

Eine Komponente für Sitzungs-Timeout-Alarme, die unter Berücksichtigung von Mikrointeraktionen entwickelt wurde und ein Graustufen-Farbschema und ein responsives Design mit Unterstützung für dunkle Designs verwendet. Ideal für E-Commerce-Plattformen, um Benutzer über den Ablauf von Sitzungen zu informieren.

Offen

Komponente "Sitzungs-Timeout-Warnung"

Eine reaktionsschnelle, mit dunklem Design kompatible Session Timeout Alert Component mit Glassmorphism-Stil, Erdtönen und komplexem Layout unter Verwendung von Tailwind CSS. Mit Milchglaseffekten, Unschärfe und mehreren interaktiven Elementen, die für ein Portfolio geeignet sind.

Offen

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.

Offen