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 Component는 Microinteractions 스타일, 반응형 효과 및 어두운 테마를 지원합니다.

열다

Session Timeout Alert 구성 요소

glassmorphism 스타일로 설계되었으며 어두운 테마에 적합한 반응형 세션 시간 초과 경고 구성 요소입니다. 파스텔 색상의 구성표, 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소, 카운트다운 타이머 및 작업 버튼과 같은 일부 대화형 기능이 특징입니다.

열다

세션 시간 초과 경고

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

열다