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 구성 요소
마켓 플레이스 플랫폼을위한 브루탈리스트 스타일의 생동감 있고 반응이 빠른 세션 시간 초과 경고 구성 요소로, 다크 모드를 지원합니다.