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

Session Timeout Alert 구성 요소

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

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg text-center p-6 max-w-md w-full">
        <img src="https://picsum.photos/200/100?random=1" alt="Session Timeout" class="w-full h-24 rounded-md object-cover mb-4">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Session Timeout Warning</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Your session is about to expire due to inactivity. Please save your work and log in again to continue.</p>
        <div class="flex justify-between mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-400 dark:border-gray-600">
            <p class="text-base font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
        </div>
        <div class="flex space-x-4">
            <button class="px-4 py-2 bg-blue-600 text-white font-bold rounded hover:bg-blue-700 transition duration-200">Stay Logged In</button>
            <button class="px-4 py-2 bg-red-600 text-white font-bold rounded hover:bg-red-700 transition duration-200">Log Out</button>
        </div>
    </div>
</div>

관련 구성 요소

Session Timeout Alert 구성 요소

직업/경력 플랫폼을 위해 설계된 간단하고 깨끗하며 전문적인 세션 시간 초과 경고 구성 요소입니다. 유사한 색 구성표를 사용하고 어두운 모드를 지원합니다.

열다

Session Timeout Alert 구성 요소

미니멀한 그레이스케일 디자인의 복잡하고 반응이 빠른 세션 시간 초과 경고 구성 요소로, 비즈니스 웹 사이트에 적합하며 어두운 테마 지원을 포함합니다.

열다

Session Timeout Alert 구성 요소

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

열다