CCHub Logo CCHub Tailwind Collection
구성 요소 세션 시간 초과 경고 스큐어모픽 세션 타임아웃 경고

스큐어모픽 세션 타임아웃 경고

블로그/콘텐츠 사이트를 위해 설계된 회색조의 간단한 Skeuomorphic 스타일 세션 시간 초과 경고 구성 요소입니다. 반응형 디자인과 다크 모드 지원이 포함됩니다.

미리 보기

HTML 코드 

<div class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center p-4 z-50 dark:bg-opacity-75">
  <div class="bg-gray-100 dark:bg-gray-800 p-8 rounded-lg shadow-xl border-t-4 border-gray-300 dark:border-gray-700 max-w-sm mx-auto transform transition duration-300 hover:scale-105">
    <div class="flex flex-col items-center">
      <div class="text-5xl mb-4" role="img" aria-label="Clock Icon">⏳</div>
      <h2 class="text-2xl font-bold mb-2 text-gray-800 dark:text-gray-100">Session Expiring!</h2>
      <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Your session is about to expire due to inactivity. Please click

관련 구성 요소

Session Timeout Alert 구성 요소

마켓 플레이스 플랫폼을위한 브루탈리스트 스타일의 생동감 있고 반응이 빠른 세션 시간 초과 경고 구성 요소로, 다크 모드를 지원합니다.

열다

세션 시간 초과 경고

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

열다

Session Timeout Alert 구성 요소

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

열다