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

Session Timeout Alert 구성 요소

매력적인 애니메이션을 트리거하는 세션 시간 초과 경고 구성 요소입니다. 파스텔 색 구성표와 어두운 테마 지원이 있는 대시보드에 적합한 반응형 디자인이 특징입니다. 여기에는 사용자가 세션을 연장하거나 로그아웃할 수 있는 대화형 요소가 포함되어 있습니다.

미리 보기

HTML 코드 

<div class="fixed inset-0 flex items-center justify-center bg-white dark:bg-gray-800 z-50 rounded-lg shadow-lg transition-all duration-300 p-5">
    <div class="bg-pastel-green rounded-md p-4 shadow-md transition-transform transform hover:scale-105">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Session Timeout Alert</h2>
        <p class="mt-2 text-gray-600 dark:text-gray-400">Your session is about to expire. Would you like to extend it?</p>
        <div class="flex justify-around mt-4">
            <button class="bg-blue-500 text-white dark:bg-blue-700 rounded-md px-4 py-2 transition-colors hover:bg-blue-600 dark:hover:bg-blue-600">Extend</button>
            <button class="bg-red-500 text-white dark:bg-red-700 rounded-md px-4 py-2 transition-colors hover:bg-red-600 dark:hover:bg-red-600">Log Out</button>
        </div>
    </div>
    <div class="absolute bottom-2 right-2">
        <img src="https://picsum.photos/50/50" alt="Illustrative Image" class="rounded-full border-2 border-white dark:border-gray-800 shadow-lg" />
    </div>
</div>

관련 구성 요소

Session Timeout Alert 구성 요소

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

열다

세션 시간 초과 경고 구성 요소 - Neumorphism Candy

뉴모피즘 디자인 스타일을 가진 반응형 세션 시간 초과 경고 구성 요소로, candy/sweet 색 구성표를 사용합니다. 기능에는 다크 모드 지원 및 패션/뷰티 브랜드를 위한 카운트다운 타이머가 포함됩니다.

열다

레트로세션 타임아웃어래트(RetroSessionTimeoutAlert)

흙색이 있는 레트로 테마의 세션 시간 초과 경고 구성 요소로, 블로그/콘텐츠 사이트를 위해 설계되었습니다. 반응형 디자인과 다크 모드 지원으로 향수를 불러일으키는 모습이 특징입니다.

열다