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

Session Timeout Alert 구성 요소

마이크로 인터랙션을 염두에 두고 설계된 세션 시간 초과 경고 구성 요소로, 회색조 색 구성표와 어두운 테마를 지원하는 반응형 디자인을 활용합니다. 전자 상거래 플랫폼에서 사용자에게 세션 만료에 대해 경고하는 데 적합합니다.

미리 보기

HTML 코드 

<div class="fixed top-0 left-0 right-0 z-50 p-4 flex justify-between items-center bg-white dark:bg-gray-800 flex-col sm:flex-row rounded-lg shadow-lg">
    <div class="flex items-center space-x-3">
        <img src="https://picsum.photos/50/50" alt="Session Timeout" class="w-12 h-12 rounded-full shadow-lg" />
        <div class="text-gray-900 dark:text-white">
            <h2 class="text-lg font-semibold">Session Timeout</h2>
            <p class="text-sm">Your session is about to expire. Please take action to continue shopping.</p>
        </div>
    </div>
    <div class="flex space-x-2 mt-4 sm:mt-0">
        <button class="px-4 py-2 font-semibold text-white bg-gray-900 rounded-md transition duration-300 ease-in-out hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Stay Logged In</button>
        <button class="px-4 py-2 font-semibold text-gray-900 border border-gray-900 rounded-md transition duration-300 ease-in-out hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:text-white dark:border-white dark:hover:bg-gray-700">Log Out</button>
    </div>
</div>

관련 구성 요소

Session Timeout Alert 구성 요소

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

열다

Session Timeout Alert 구성 요소

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

열다

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

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

열다