会话超时警报组件 - Neumorphism Candy

<div class="flex items-center justify-center min-h-screen bg-pink-100 dark:bg-gray-900 p-4 font-sans">
  <div class="w-full max-w-sm rounded-3xl shadow-xl p-8 bg-gradient-to-br from-pink-200 to-purple-200 dark:from-gray-700 dark:to-gray-800
              flex flex-col items-center justify-center
              transform transition-all duration-300 ease-in-out
              dark:border dark:border-gray-600
              shadow-[10px_10px_20px_#bebebe,-10px_-10px_20px_#ffffff] dark:shadow-[10px_10px_20px_#1a1a1a,-10px_-10px_20px_#333333]">

    <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-pink-300 to-purple-300 dark:from-indigo-600 dark:to-purple-600
                shadow-lg transition-transform duration-300 ease-in-out transform scale-95 hover:scale-100
                shadow-[inset_5px_5px_10px_#9f7aea,inset_-5px_-5px_10px_#ff99d9] dark:shadow-[inset_5px_5px_10px_#5e34b7,inset_-5px_-5px_10px_#2c2c2c]">
      <svg class="w-10 h-10 text-white dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
      </svg>
    </div>

    <h3 class="mt-6 mb-2 text-2xl font-bold text-pink-700 dark:text-pink-300 text-center">
      Session Timeout
    </h3>
    <p class="text-center text-gray-700 dark:text-gray-400 text-sm mb-6 max-w-xs">
      Your session is about to expire due to inactivity. Save your work or you will be logged out in:
    </p>

    <div class="relative w-36 h-12 rounded-full bg-gradient-to-br from-pink-300 to-purple-300 dark:from-gray-600 dark:to-gray-700
                shadow-[inset_5px_5px_10px_#9f7aea,inset_-5px_-5px_10px_#ff99d9] dark:shadow-[inset_5px_5px_10px_#4a4a4a,inset_-5px_-5px_10px_#2c2c2c]
                flex items-center justify-center mb-8 transition-all duration-300 ease-in-out">
      <span class="text-3xl font-extrabold text-white dark:text-white" id="countdown">00:59</span>
    </div>

    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 w-full justify-center">
      <button class="flex-1 py-3 px-6 rounded-3xl font-semibold
                     bg-gradient-to-br from-purple-400 to-indigo-500 dark:from-purple-700 dark:to-indigo-800
                     text-white shadow-md
                     hover:from-purple-500 hover:to-indigo-600 dark:hover:from-purple-800 dark:hover:to-indigo-900
                     active:shadow-inner active:from-purple-300 active:to-indigo-400 dark:active:from-purple-600 dark:active:to-indigo-700
                     transition-all duration-200 ease-in-out
                     shadow-[5px_5px_10px_#bebebe,-5px_-5px_10px_#ffffff] dark:shadow-[5px_5px_10px_#1a1a1a,-5px_-5px_10px_#333333]">
        Stay Logged In
      </button>
      <button class="flex-1 py-3 px-6 rounded-3xl font-semibold
                     bg-gradient-to-br from-pink-400 to-rose-500 dark:from-pink-700 dark:to-rose-800
                     text-white shadow-md
                     hover:from-pink-500 hover:to-rose-600 dark:hover:from-pink-800 dark:hover:to-rose-900
                     active:shadow-inner active:from-pink-300 active:to-rose-400 dark:active:from-pink-600 dark:active:to-rose-700
                     transition-all duration-200 ease-in-out
                     shadow-[5px_5px_10px_#bebebe,-5px_-5px_10px_#ffffff] dark:shadow-[5px_5px_10px_#1a1a1a,-5px_-5px_10px_#333333]">
        Log Out
      </button>
    </div>
  </div>
</div>