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

<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>