Retro_Captcha_Component

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-300 to-blue-600 dark:from-gray-900 dark:to-blue-900 p-4 font-mono sm:p-6 lg:p-8">
  <div class="w-full max-w-md rounded-lg shadow-xl overflow-hidden border-4 border-blue-900 bg-gradient-to-br from-blue-100 to-blue-300 dark:from-gray-800 dark:to-blue-950 transform rotate-[-2deg] skew-y-1 relative motion-safe:transition-transform motion-safe:duration-300 hover:rotate-0 hover:skew-y-0">
    <div class="absolute inset-0 bg-blue-200 opacity-20 dark:bg-blue-900 dark:opacity-30 blur-sm pointer-events-none"></div>
    <div class="p-6 relative z-10 space-y-6 sm:p-8">
      <h2 class="text-3xl font-extrabold text-blue-900 uppercase tracking-widest text-shadow-sm dark:text-blue-100 dark:text-shadow-md text-center transform rotate-[-1deg]">
        SYSTEM AUTHENTICATION
      </h2>
      <p class="text-sm text-blue-800 text-center font-semibold dark:text-blue-200 leading-snug transform skew-y-1">
        Please prove you're not a robot by completing the challenge below.
      </p>

      <div class="bg-blue-600 border-4 border-blue-900 p-2 rounded transform rotate-[1deg] shadow-lg dark:bg-blue-950 dark:border-blue-700">
        <div class="flex flex-col items-center justify-center p-4 bg-blue-50 border-2 border-blue-400 aspect-video overflow-hidden relative dark:bg-gray-700 dark:border-gray-600">
          <img src="https://picsum.photos/400/150?blur=5&grayscale&random=1" alt="Distorted CAPTCHA image" class="w-full h-full object-cover transform scale-110 rotate-[-3deg] skew-y-2 opacity-80 filter blur-[0.5px] contrast-150 brightness-110" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-100/30 via-blue-500/10 to-blue-900/40 dark:from-gray-700/30 dark:via-gray-900/10 dark:to-gray-950/40"></div>
          <p class="absolute text-3xl sm:text-4xl lg:text-5xl font-black text-blue-950 tracking-widest leading-none select-none drop-shadow-lg transform rotate-[3deg] skew-x-3 dark:text-blue-200 dark:drop-shadow-xl">
            <span class="inline-block rotate-[-5deg]">P</span>
            <span class="inline-block rotate-[2deg]">R</span>
            <span class="inline-block rotate-[-1deg]">0</span>
            <span class="inline-block rotate-[4deg]">T</span>
            <span class="inline-block rotate-[-3deg]">E</span>
            <span class="inline-block rotate-[1deg]">C</span>
            <span class="inline-block rotate-[-2deg]">T</span>
          </p>
          <div class="absolute bottom-2 right-2 flex space-x-2">
            <button aria-label="Refresh CAPTCHA" class="p-1.5 bg-blue-200 rounded-full text-blue-800 hover:bg-blue-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500 shadow-md transform hover:scale-105 active:scale-95 transition-transform duration-150">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12v.622m15.356-2A8.001 8.001 0 0120 12v.622"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>

      <div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
        <div class="flex-1">
          <label for="captcha-input" class="block text-sm font-bold text-blue-800 uppercase mb-2 dark:text-blue-200 transform -rotate-[0.5deg]">
            Verify Code:
          </label>
          <input type="text" id="captcha-input" placeholder="Enter the text above..." class="w-full px-4 py-2 bg-blue-50 border-4 border-blue-700 rounded-md text-blue-900 placeholder-blue-500 focus:ring-2 focus:ring-blue-500 focus:border-blue-900 outline-none shadow-inner transform skew-y-[-0.5deg] text-lg lg:text-xl dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-400">
        </div>
        <div class="flex-shrink-0 flex items-end justify-center pt-2 md:pt-0">
          <button aria-label="Play audio CAPTCHA" class="p-3 bg-blue-700 rounded-md text-white border-2 border-blue-900 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-md transform rotate-[2deg] hover:rotate-0 active:scale-95 transition-all duration-200 dark:bg-blue-600 dark:border-blue-800 dark:hover:bg-blue-700">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.998 9.998 0 0119 10a9.998 9.998 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.998 7.998 0 0017 10c0-2.222-.89-4.212-2.343-5.657a1 1 0 010-1.414zm-2.828 2.828a1 1 0 011.414 0A5.996 5.996 0 0115 10a5.996 5.996 0 01-1.757 4.243 1 1 0 01-1.414-1.414A3.996 3.996 0 0013 10c0-1.03-1.04-2.176-1.707-2.828a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            </svg>
          </button>
        </div>
      </div>

      <div class="pt-4">
        <button type="submit" class="w-full py-3 px-6 bg-blue-900 text-blue-50 uppercase font-extrabold rounded-md shadow-lg border-2 border-blue-950 focus:outline-none focus:ring-4 focus:ring-blue-400 hover:bg-blue-800 dark:bg-blue-700 dark:text-blue-100 dark:border-blue-900 dark:hover:bg-blue-600 transform skew-x-[-1deg] rotate-[0.5deg] tracking-wide text-lg sm:text-xl motion-safe:transition-transform motion-safe:duration-300 hover:skew-x-0 hover:rotate-0 active:scale-98">
          SUBMIT VERIFICATION
        </button>
      </div>
    </div>
    <div class="absolute bottom-0 right-0 p-2 text-blue-900 text-xs opacity-70 dark:text-blue-200 dark:opacity-50 transform rotate-[-2deg]">
      &copy; 2023 RETRO-SECURE. ALL RIGHTS RESERVED.
    </div>
  </div>
</div>

<style>
  /* Custom text-shadow for a retro feel */
  .text-shadow-sm {
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2), 1px 1px 0px rgba(255, 255, 255, 0.4);
  }
  .dark .text-shadow-sm {
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.4), 1px 1px 0px rgba(50, 100, 200, 0.2);
  }
  
  .text-shadow-md {
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3), 2px 2px 0px rgba(255, 255, 255, 0.5);
  }
  .dark .text-shadow-md {
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.6), 2px 2px 0px rgba(50, 100, 200, 0.4);
  }
</style>