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

Session Timeout Alert 구성 요소

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

미리 보기

HTML 코드 

<div class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-70 dark:bg-gray-800 dark:bg-opacity-70">
    <div class="bg-white dark:bg-gray-900 backdrop-blur-lg rounded-lg shadow-lg p-6 max-w-sm w-full">
        <h2 class="text-center text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Session Timeout Alert</h2>
        <p class="text-center text-gray-600 dark:text-gray-400 mb-6">Your session will expire in <span id="countdown" class="font-bold text-red-500">05:00</span> minutes.</p>
        <div class="flex justify-around mt-4">
            <button class="bg-gradient-to-r from-pink-400 to-blue-400 text-white font-medium py-2 px-4 rounded-lg hover:opacity-90 focus:outline-none dark:from-pink-500 dark:to-blue-500">Stay Logged In</button>
            <button class="bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded-lg hover:opacity-90 focus:outline-none dark:bg-gray-600 dark:text-gray-200">Logout</button>
        </div>
    </div>
</div>

관련 구성 요소

세션 시간 초과 경고

Tailwind CSS를 사용하여 3D 디자인, 트라이어딕 색 구성표 및 다크 모드를 지원하는 반응형 세션 시간 초과 경고 구성 요소입니다.

열다

Session Timeout Alert 구성 요소

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

열다

Session Timeout Alert 구성 요소

네온/글로우 효과가 있는 간단하고 반응이 빠른 단색 세션 시간 초과 경고 구성 요소로, 교육/학습 플랫폼용으로 설계되었습니다. 다크 모드 지원이 포함됩니다.

열다