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

Session Timeout Alert Component는 생생하고 대담한 미학, 높은 대비 및 반응형 효과를 갖춘 브루탈리즘 스타일로 설계되었습니다. 이 구성 요소는 Tailwind CSS 스타일을 사용하여 어두운 테마를 지원하고 picsum.photos 및 randomuser.me 의 자리 표시자 이미지를 사용합니다.

열다

Session Timeout Alert 구성 요소

반응형 세션 시간 초과 경고 구성 요소로, 3D 디자인 스타일, 어두운 테마 지원 및 자리 표시자 이미지를 통합합니다.

열다

세션 시간 초과 경고

어두운 테마를 지원하는 반응형 세션 시간 초과 경고 구성 요소로, 파스텔 색상을 사용하여 미니멀리스트/플랫 미학으로 설계되었습니다. 명확한 타이포그래피와 사용자 상호 작용을 위한 미묘한 시각적 단서가 있는 깔끔한 레이아웃이 특징이며 대시보드 환경에 적합합니다.

열다