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

Warnung bei Sitzungs-Timeout

Eine einfache, monochromatische Material Design-Session-Timeout-Alarmkomponente für soziale Medien mit responsivem Design und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
    <div class="mt-3 text-center">
      <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-gray-100 dark:bg-gray-700">
        <svg class="h-6 w-6 text-gray-600 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white mt-4">Session Expiring</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-300">Your session is about to expire. You will be logged out automatically.</p>
      </div>
      <div class="items-center px-4 py-3">
        <button id="ok-btn" class="px-4 py-2 bg-gray-600 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-600">OK</button>
      </div>
    </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, 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

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.

Offen