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 구성 요소

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

열다

Session Timeout Alert 구성 요소

여러 색상의 그라데이션 배경이 있는 간단하고 반응이 빠른 세션 시간 초과 경고 구성 요소로, 이벤트 및 컨퍼런스 웹 사이트를 위해 설계되었습니다. 다크 모드 지원이 포함됩니다.

열다