Session Timeout Alert 구성 요소
Session Timeout Alert Component는 생생하고 대담한 미학, 높은 대비 및 반응형 효과를 갖춘 브루탈리즘 스타일로 설계되었습니다. 이 구성 요소는 Tailwind CSS 스타일을 사용하여 어두운 테마를 지원하고 picsum.photos 및 randomuser.me 의 자리 표시자 이미지를 사용합니다.
HTML 코드
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg text-center p-6 max-w-md w-full">
<img src="https://picsum.photos/200/100?random=1" alt="Session Timeout" class="w-full h-24 rounded-md object-cover mb-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Session Timeout Warning</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Your session is about to expire due to inactivity. Please save your work and log in again to continue.</p>
<div class="flex justify-between mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-400 dark:border-gray-600">
<p class="text-base font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
</div>
<div class="flex space-x-4">
<button class="px-4 py-2 bg-blue-600 text-white font-bold rounded hover:bg-blue-700 transition duration-200">Stay Logged In</button>
<button class="px-4 py-2 bg-red-600 text-white font-bold rounded hover:bg-red-700 transition duration-200">Log Out</button>
</div>
</div>
</div>
관련 구성 요소
세션 시간 초과 경고
전자 상거래 사이트를 위한 간단한 다크 모드 세션 시간 초과 경고 구성 요소로, TailwindCSS를 사용하여 파스텔 색상과 응답성으로 설계되었습니다.
Session Timeout Alert 구성 요소
매력적인 애니메이션과 어두운 테마로 전자 상거래를 위해 설계된 반응형 세션 시간 초과 경고 구성 요소입니다. 경고 메시지, 카운트다운 타이머 및 세션 연장 또는 로그아웃 옵션이 있습니다.