Exit-Intent Newsletter Signup Modal

<div
  class="fixed -translate-x-1/2 -translate-y-1/2 z-[9999] transition-all duration-300 ease-out w-full max-w-md mr-4 ml-4 top-1/2 left-1/2"
  id="exit-popup-modal">
  <div
    class="bg-zinc-900/80 border-white/10 border rounded-2xl pt-8 pr-8 pb-8 pl-8 relative shadow-2xl backdrop-blur-xl">
    <button id="exit-popup-close" class="absolute top-4 right-4 text-zinc-400 hover:text-white transition-colors duration-200 p-1 rounded-full hover:bg-white/10">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
            <path d="M18 6 6 18" class=""></path>
            <path d="m6 6 12 12" class=""></path>
          </svg>
        </button>
    <div class="text-center">
      <div
        class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-blue-500/10 border border-blue-500/20 mb-6">
        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-blue-400">
          <path
            d="M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z"
            class=""></path>
          <path d="m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10" class=""></path>
        </svg>
      </div>
      <h3 class="text-2xl md:text-3xl font-semibold text-white tracking-tight mb-3">
        Thanks for coming by!
      </h3>
      <p class="text-zinc-400 font-light leading-relaxed mb-8">
        Don't miss out on exclusive AI recruitment insights. Join our
        newsletter and get the latest strategies delivered straight to your
        inbox.
      </p>
      <form id="exit-popup-form" class="space-y-4">
        <input type="email" id="exit-popup-email" placeholder="Enter your email address" required="" class="w-full bg-zinc-800/60 border border-white/10 rounded-xl px-4 py-3.5 text-white placeholder-zinc-500 text-sm focus:outline-none focus:border-blue-500/50 focus:ring-2 focus:ring-blue-500/20 transition-all duration-200">
        <button type="submit" class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-semibold py-3.5 px-6 rounded-xl transition-all duration-200 shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30 hover:scale-[1.02] active:scale-[0.98]">
              Sign Up
            </button>
      </form>
      <p id="exit-popup-success" class="hidden text-emerald-400 text-sm font-medium mt-4">
        Thanks for subscribing! 🎉
      </p>
      <p class="text-xs text-zinc-600 mt-6">
        No spam, ever. Unsubscribe anytime.
      </p>
    </div>
  </div>
</div>