CCHub Logo CCHub Tailwind Collection
구성 요소 세션 시간 초과 경고 Session Timeout Alert 구성 요소

Session Timeout Alert 구성 요소

여러 색상의 그라데이션 배경이 있는 간단하고 반응이 빠른 세션 시간 초과 경고 구성 요소로, 이벤트 및 컨퍼런스 웹 사이트를 위해 설계되었습니다. 다크 모드 지원이 포함됩니다.

미리 보기

HTML 코드 

<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 dark:bg-black dark:bg-opacity-75">
  <div class="relative w-full max-w-sm p-0 rounded-2xl shadow-xl overflow-hidden
              bg-gradient-to-br from-purple-500 via-pink-500 to-red-500
              dark:from-purple-700 dark:via-pink-700 dark:to-red-700">
    <div class="p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-xl m-0.5">
      <div class="flex flex-col items-center justify-center text-center">
        <svg class="w-16 h-16 mb-4 text-red-500 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
        </svg>
        <h3 class="text-2xl font-extrabold text-gray-900 dark:text-white mb-2">
          Session Expired
        </h3>
        <p class="text-gray-600 dark:text-gray-300 text-base mb-6">
          Your session has timed out due to inactivity. Please log in again to continue.
        </p>
        <div class="w-full flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
          <button class="w-full px-6 py-3 rounded-full text-white font-semibold transition-all duration-300 transform
                         bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600
                         shadow-lg hover:shadow-xl dark:shadow-none">
            Log In Now
          </button>
          <button class="w-full px-6 py-3 rounded-full font-semibold transition-all duration-300 transform
                         bg-gray-100 text-gray-800 hover:bg-gray-200
                         dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600
                         shadow-md hover:shadow-lg dark:shadow-none">
            Cancel
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

세션 타임아웃 경고 컴포넌트 - Neumorphic Rainbow

그라데이션 무지개 색 구성표가 있는 데이트/소셜 앱을 위한 Neumorphic Session Timeout Alert 구성 요소입니다. 반응형이며 다크 모드를 지원하여 사용자에게 세션을 연장하거나 로그아웃하라는 메시지를 표시합니다.

열다

Session Timeout Alert 구성 요소

glassmorphism 스타일로 설계되었으며 어두운 테마에 적합한 반응형 세션 시간 초과 경고 구성 요소입니다. 파스텔 색상의 구성표, 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소, 카운트다운 타이머 및 작업 버튼과 같은 일부 대화형 기능이 특징입니다.

열다

Session Timeout Alert 구성 요소

Session Timeout Alert Component는 생생하고 대담한 미학, 높은 대비 및 반응형 효과를 갖춘 브루탈리즘 스타일로 설계되었습니다. 이 구성 요소는 Tailwind CSS 스타일을 사용하여 어두운 테마를 지원하고 picsum.photos 및 randomuser.me 의 자리 표시자 이미지를 사용합니다.

열다