CCHub Logo CCHub Tailwind Collection
구성 요소 세션 시간 초과 경고 세션 시간 초과 경고

세션 시간 초과 경고

소셜 미디어를 위한 간단한 단색 Material Design 세션 시간 초과 경고 구성 요소로, 반응형 디자인과 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<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>

관련 구성 요소

Session Timeout Alert 구성 요소

여행/관광 웹 사이트를 위해 설계된 반응형 세션 시간 초과 경고 구성 요소로, 회사 블루 톤의 다크 모드 UI를 특징으로 합니다. 세션 만료에 대한 명확한 커뮤니케이션을 제공하고 확장 또는 로그아웃할 수 있는 옵션을 제공합니다.

열다

Session Timeout Alert 구성 요소

반응형, 어두운 테마와 호환되는 세션 시간 초과 경고 구성 요소로, Glassmorphism 스타일, 어스 톤 및 Tailwind CSS를 사용하는 복잡한 레이아웃이 있습니다. 젖빛 유리 효과, 흐림 효과 및 포트폴리오에 적합한 여러 대화형 요소가 특징입니다.

열다

세션 시간 초과 경고 구성 요소 - 수채화/예술적

전자 상거래를 위한 복잡하고 반응이 빠른 세션 시간 초과 경고 구성 요소로, 그라데이션 무지개 색 구성표와 다크 모드를 지원하는 수채화/예술적 디자인을 특징으로 합니다. 확장 또는 로그아웃 옵션이 포함되어 있습니다.

열다