セッション タイムアウト警告コンポーネント

<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gradient-to-br from-blue-500/20 via-purple-500/20 to-pink-500/20 backdrop-blur-sm dark:from-gray-900/50 dark:via-gray-800/50 dark:to-gray-700/50" aria-labelledby="session-timeout-title" role="dialog" aria-modal="true">
  <div class="w-full max-w-md p-6 bg-white rounded-xl shadow-2xl relative overflow-hidden transform transition-all sm:my-8 sm:w-full sm:max-w-lg
              dark:bg-gray-800 dark:border dark:border-gray-700">
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-30">
      <div class="absolute -top-10 -left-10 w-48 h-48 bg-gradient-to-br from-red-400 to-yellow-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:from-red-600 dark:to-yellow-600"></div>
      <div class="absolute -bottom-8 -right-8 w-60 h-60 bg-gradient-to-br from-green-400 to-blue-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 dark:from-green-600 dark:to-blue-600"></div>
      <div class="absolute top-1/4 -right-20 w-52 h-52 bg-gradient-to-br from-purple-400 to-pink-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 dark:from-purple-600 dark:to-pink-600"></div>
    </div>

    <div class="relative z-10 text-center">
      <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-red-500 via-yellow-500 to-green-500 p-1 mb-4 sm:mb-6">
        <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.174 3.353 1.94 3.353h12.126c1.766 0 2.806-1.853 1.94-3.353L12.94 3.376c-.866-1.5-3.032-1.5-3.898 0L2.697 16.376zM12 15.75h.007v.008H12v-.008z" />
        </svg>
      </div>
      <h3 class="text-xl sm:text-2xl font-extrabold leading-6 text-gray-900 transition-colors duration-300 dark:text-gray-100 mb-2" id="session-timeout-title">
        Your Session is About to Expire!
      </h3>
      <div class="mt-2 text-base text-gray-700 dark:text-gray-300 transition-colors duration-300">
        <p>For your security, your session will automatically end in <span class="font-bold text-lg text-red-600 dark:text-red-400">1:45</span>.</p>
        <p class="mt-2">Please save any unsaved work.</p>
      </div>
      <div class="mt-5 sm:mt-6 flex flex-col sm:flex-row-reverse sm:space-x-reverse sm:space-x-4 space-y-3 sm:space-y-0">
        <button type="button" class="inline-flex w-full justify-center rounded-md border border-transparent bg-gradient-to-r from-teal-500 to-cyan-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:from-teal-600 hover:to-cyan-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm
                      dark:focus:ring-offset-gray-800 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
          Extend Session
        </button>
        <button type="button" class="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm
                      dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800 transition-colors duration-300">
          Log out now
        </button>
      </div>
    </div>
  </div>
</div>

<style>
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite;
  }
  .animation-delay-2000 {
    animation-delay: 2s;
  }
  .animation-delay-4000 {
    animation-delay: 4s;
  }
</style>