세션 시간 초과 경고
소셜 미디어를 위한 간단한 단색 Material Design 세션 시간 초과 경고 구성 요소로, 반응형 디자인과 어두운 테마를 지원합니다.
HTML 코드
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
<div class="mt-3 text-center">
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-gray-100 dark:bg-gray-700">
<svg class="h-6 w-6 text-gray-600 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white mt-4">Session Expiring</h3>
<div class="mt-2 px-7 py-3">
<p class="text-sm text-gray-500 dark:text-gray-300">Your session is about to expire. You will be logged out automatically.</p>
</div>
<div class="items-center px-4 py-3">
<button id="ok-btn" class="px-4 py-2 bg-gray-600 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-600">OK</button>
</div>
</div>
</div>
</div>
관련 구성 요소
Session Timeout Alert 구성 요소
미니멀한 그레이스케일 디자인의 복잡하고 반응이 빠른 세션 시간 초과 경고 구성 요소로, 비즈니스 웹 사이트에 적합하며 어두운 테마 지원을 포함합니다.
세션 시간 초과 경고 구성 요소 - Neumorphism Candy
뉴모피즘 디자인 스타일을 가진 반응형 세션 시간 초과 경고 구성 요소로, candy/sweet 색 구성표를 사용합니다. 기능에는 다크 모드 지원 및 패션/뷰티 브랜드를 위한 카운트다운 타이머가 포함됩니다.
세션 시간 초과 경고
전자 상거래 사이트를 위한 간단한 다크 모드 세션 시간 초과 경고 구성 요소로, TailwindCSS를 사용하여 파스텔 색상과 응답성으로 설계되었습니다.