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

Session Timeout Alert 구성 요소

전자 상거래 웹 사이트를 위한 미니멀리스트 세션 시간 초과 경고 구성 요소로, 단색 색 구성표로 디자인되고 Tailwind CSS를 사용하여 어두운 테마 지원으로 반응합니다.

미리 보기

HTML 코드 

<div class="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-90 dark:bg-gray-900">
    <div class="max-w-sm w-full bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg p-5">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Session Timeout Warning</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-4">Your session is about to expire due to inactivity. Please take action to continue your shopping experience. </p>
        <div class="flex justify-between">
            <button class="bg-gray-300 dark:bg-gray-600 text-gray-900 dark:text-gray-100 font-semibold py-2 px-4 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition">Stay Logged In</button>
            <button class="bg-red-500 dark:bg-red-700 text-white font-semibold py-2 px-4 rounded hover:bg-red-600 dark:hover:bg-red-800 transition">Log Out</button>
        </div>
    </div>
</div>

관련 구성 요소

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

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

열다

Session Timeout Alert 구성 요소

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

열다

Session Timeout Alert 구성 요소

레트로/빈티지 색 구성표가 있는 미니멀리스트 및 플랫 디자인 세션 시간 초과 경고 구성 요소로, 블로그/콘텐츠 사이트에 대한 간단한 레이아웃, 완전한 응답성 및 다크 모드 지원을 특징으로 합니다.

열다