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

세션 시간 초과 경고

전자 상거래 사이트를 위한 간단한 다크 모드 세션 시간 초과 경고 구성 요소로, TailwindCSS를 사용하여 파스텔 색상과 응답성으로 설계되었습니다.

미리 보기

HTML 코드 

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

관련 구성 요소

Session Timeout Alert 구성 요소

미니멀한 스위스/인터내셔널 타이포그래피 스타일과 밝은 Candy/Sweet 색상 구성표로 설계된 복잡하고 반응이 빠른 세션 시간 초과 경고 구성 요소로, 직업 및 경력 플랫폼에 적합합니다. 다크 모드 지원 및 대화형 요소가 포함되어 있습니다.

열다

Session Timeout Alert 구성 요소

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

열다

Session Timeout Alert 구성 요소

모노스페이스/개발자 디자인, 흑백 구성표, 밝은 강조 색상을 갖춘 복잡하고 반응이 빠른 세션 시간 초과 경고 구성 요소로, 교육 플랫폼에 적합합니다. 다크 모드 지원 및 카운트다운이 포함됩니다.

열다