HTML 코드
<div class="fixed inset-0 bg-gray-800 bg-opacity-75 z-50">
<div class="flex items-center justify-center min-h-screen">
<div class="relative bg-stone-100 p-8 rounded-lg shadow-xl max-w-sm w-full mx-4 dark:bg-stone-800">
<div class="text-center">
<svg class="mx-auto mb-4 h-12 w-12 text-amber-500" 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 9v2m0 4h.01m-6.938 4h13.856a1 1 0 00.77-1.612L11.73 2.61a1 1 0 00-1.464 0L3.308 19.388a1 1 0 00.77 1.612z"></path></svg>
<h3 class="mb-5 text-lg font-bold text-stone-900 dark:text-stone-100">Session Timeout</h3>
<p class="mb-5 text-sm text-stone-700 dark:text-stone-300">Your session is about to expire. Would you like to stay logged in?</p>
<button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-amber-600 text-base font-medium text-white hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 sm:col-start-2 sm:text-sm dark:bg-amber-700 dark:hover:bg-amber-800">
Stay Logged In
</button>
</div>
</div>
</div>
</div>
관련 구성 요소
세션 타임아웃 경고 컴포넌트 - Neumorphic Rainbow
그라데이션 무지개 색 구성표가 있는 데이트/소셜 앱을 위한 Neumorphic Session Timeout Alert 구성 요소입니다. 반응형이며 다크 모드를 지원하여 사용자에게 세션을 연장하거나 로그아웃하라는 메시지를 표시합니다.
Session Timeout Alert 구성 요소
마켓 플레이스 플랫폼을위한 브루탈리스트 스타일의 생동감 있고 반응이 빠른 세션 시간 초과 경고 구성 요소로, 다크 모드를 지원합니다.