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 구성 요소

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

열다

Session Timeout Alert 구성 요소

매력적인 애니메이션과 어두운 테마로 전자 상거래를 위해 설계된 반응형 세션 시간 초과 경고 구성 요소입니다. 경고 메시지, 카운트다운 타이머 및 세션 연장 또는 로그아웃 옵션이 있습니다.

열다

Session Timeout Alert 구성 요소

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

열다