セッション タイムアウト アラート

<div class="fixed inset-0 bg-gray-900 bg-opacity-50 dark:bg-opacity-75 flex items-center justify-center p-4">
  <div class="relative bg-gradient-to-br from-blue-500 to-purple-600 dark:from-gray-700 dark:to-gray-900 text-white rounded-lg shadow-lg p-6 max-w-sm w-full transform transition-all duration-300 scale-100 hover:scale-105">
    <div class="absolute inset-0 bg-white bg-opacity-10 dark:bg-opacity-5 rounded-lg pointer-events-none"></div>
    <div class="relative">
      <h2 class="text-2xl font-bold mb-4 text-shadow">Session Timeout</h2>
      <p class="mb-6 text-shadow-sm">Your session is about to expire. Please save any unsaved work.</p>
      <div class="flex justify-end space-x-4">
        <button class="bg-white text-blue-600 dark:text-gray-800 px-4 py-2 rounded-md font-semibold shadow hover:bg-gray-200 dark:hover:bg-gray-300 transition duration-300">Stay Logged In</button>
        <button class="bg-red-500 text-white px-4 py-2 rounded-md font-semibold shadow hover:bg-red-600 transition duration-300">Log Out</button>
      </div>
    </div>
  </div>
</div>

<style>
.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.text-shadow-sm {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
</style>