Componente de alerta de tiempo de espera de sesión

<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/80 dark:bg-black/90">
  <div class="w-full max-w-md border-4 border-black dark:border-white bg-lime-400 dark:bg-fuchsia-700 shadow-[8px_8px_0px_black] dark:shadow-[8px_8px_0px_white] transition-all duration-300 ease-in-out transform hover:scale-[1.01] hover:shadow-[16px_16px_0px_black] dark:hover:shadow-[16px_16px_0px_white]">
    <div class="p-6 sm:p-8 relative overflow-hidden">
      <div class="mb-6 absolute top-0 left-0 w-full h-full bg-yellow-300 dark:bg-cyan-500 opacity-20 -z-10 rotate-3 scale-110"></div>
      <div class="mb-6 absolute top-0 left-0 w-full h-full bg-red-600 dark:bg-purple-800 opacity-20 -z-10 -rotate-3 scale-110"></div>

      <h2 class="text-3xl sm:text-4xl font-extrabold text-black dark:text-white mb-4 uppercase leading-tight tracking-tighter border-b-4 border-black dark:border-white pb-2">
        SESSION ALERT!<br>Time's Up!
      </h2>

      <p class="text-lg sm:text-xl text-black dark:text-white mb-6 font-bold">
        Your session is about to expire. Please extend your session to continue browsing cool stuff!
      </p>

      <div class="flex flex-col sm:flex-row gap-4">
        <button class="flex-1 py-3 px-6 text-xl font-extrabold uppercase text-white dark:text-black bg-purple-700 dark:bg-lime-300 border-4 border-black dark:border-white shadow-[6px_6px_0px_black] dark:shadow-[6px_6px_0px_white] transition-all duration-200 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none focus:outline-none focus:ring-4 focus:ring-black dark:focus:ring-white">
          Extend Session
        </button>
        <button class="flex-1 py-3 px-6 text-xl font-extrabold uppercase text-black dark:text-white bg-orange-500 dark:bg-red-700 border-4 border-black dark:border-white shadow-[6px_6px_0px_black] dark:shadow-[6px_6px_0px_white] transition-all duration-200 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none focus:outline-none focus:ring-4 focus:ring-black dark:focus:ring-white">
          Log Out Now
        </button>
      </div>

      <div class="mt-8 flex items-center justify-between border-t-4 border-black dark:border-white pt-4">
        <div class="flex items-center space-x-3">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Admin Avatar" class="w-12 h-12 sm:w-16 sm:h-16 rounded-none border-4 border-black dark:border-white object-cover">
          <div>
            <p class="text-base sm:text-lg font-bold text-black dark:text-white uppercase">Admin Hot-Line</p>
            <p class="text-sm sm:text-base text-gray-800 dark:text-gray-200 font-mono">Ping us for help!</p>
          </div>
        </div>
        <a href="#" class="text-sm sm:text-base font-bold text-blue-700 dark:text-blue-300 uppercase underline decoration-4 underline-offset-4 decoration-black dark:decoration-white hover:text-blue-900 dark:hover:text-blue-100 transition-colors duration-200">Contact Support</a>
      </div>
    </div>
  </div>
</div>