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>

관련 구성 요소

세션 시간 초과 경고

Session Timeout Alert Component는 Microinteractions 스타일, 반응형 효과 및 어두운 테마를 지원합니다.

열다

Session Timeout Alert 구성 요소

여러 색상의 그라데이션 배경이 있는 간단하고 반응이 빠른 세션 시간 초과 경고 구성 요소로, 이벤트 및 컨퍼런스 웹 사이트를 위해 설계되었습니다. 다크 모드 지원이 포함됩니다.

열다

세션 시간 초과 경고 구성 요소 - 수채화/예술적

전자 상거래를 위한 복잡하고 반응이 빠른 세션 시간 초과 경고 구성 요소로, 그라데이션 무지개 색 구성표와 다크 모드를 지원하는 수채화/예술적 디자인을 특징으로 합니다. 확장 또는 로그아웃 옵션이 포함되어 있습니다.

열다