Monospace_Developer_CAPTCHA_Component

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 font-mono p-4">
  <div class="w-full max-w-md bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border-2 border-green-500 dark:border-purple-500 transform transition-all duration-300 hover:scale-105">
    <div class="bg-green-600 dark:bg-purple-600 p-3 flex items-center justify-between">
      <div class="flex space-x-2">
        <span class="p-1.5 rounded-full bg-red-500"></span>
        <span class="p-1.5 rounded-full bg-yellow-500"></span>
        <span class="p-1.5 rounded-full bg-green-500"></span>
      </div>
      <p class="text-white opacity-90 text-sm">$ interactive_captcha.sh</p>
      <button aria-label="Minimize window" class="text-white text-lg leading-none align-middle transform rotate-45 hover:text-gray-300 transition-colors duration-200">+</button>
    </div>
    <div class="p-6 space-y-6 text-gray-800 dark:text-gray-200">
      <p class="text-lg font-bold text-green-700 dark:text-purple-400">// SYSTEM_INIT: Verifying Human Identity...</p>
      <div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-md border border-gray-700 dark:border-gray-600 shadow-inner flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0 items-center justify-between">
        <div class="flex-shrink-0 w-32 h-24 bg-gray-900 dark:bg-gray-800 rounded-sm overflow-hidden border border-gray-600 dark:border-gray-500 flex items-center justify-center">
          <img src="https://picsum.photos/seed/captcha1/128/96" alt="CAPTCHA image" class="w-full h-full object-cover grayscale opacity-80">
        </div>
        <div class="flex-grow text-sm text-gray-200 dark:text-gray-300">
          <p class="mb-2">&gt; Type the characters you see in the image:</p>
          <div class="flex space-x-2">
            <span class="px-2 py-1 bg-green-500 text-gray-900 rounded inline-block transform -rotate-6 text-lg font-extrabold shadow-md">A</span>
            <span class="px-2 py-1 bg-yellow-500 text-gray-900 rounded inline-block transform rotate-3 text-lg font-extrabold shadow-md">b</span>
            <span class="px-2 py-1 bg-blue-500 text-gray-900 rounded inline-block transform -rotate-2 text-lg font-extrabold shadow-md">C</span>
            <span class="px-2 py-1 bg-red-500 text-gray-900 rounded inline-block transform rotate-5 text-lg font-extrabold shadow-md">1</span>
            <span class="px-2 py-1 bg-purple-500 text-gray-900 rounded inline-block transform -rotate-4 text-lg font-extrabold shadow-md">2</span>
          </div>
        </div>
      </div>
      <div class="space-y-4">
        <label for="captcha-input" class="block text-sm font-semibold text-green-600 dark:text-purple-400">$USER_INPUT:</label>
        <input type="text" id="captcha-input" placeholder="&gt; your_response_here" class="w-full p-3 rounded-md bg-gray-900 dark:bg-gray-700 text-green-300 dark:text-purple-300 border border-green-700 dark:border-purple-600 focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-purple-500 font-mono text-base shadow-sm leading-relaxed caret-green-500 dark:caret-purple-500">
        <div class="flex flex-col md:flex-row md:space-x-4 space-y-4 md:space-y-0">
          <button class="flex-1 py-3 px-6 bg-green-600 hover:bg-green-700 dark:bg-purple-600 dark:hover:bg-purple-700 text-white rounded-md font-bold text-lg transition-colors duration-200 shadow-lg transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-purple-500">
            <svg class="inline-block w-5 h-5 mr-2 -mt-0.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="M5 13l4 4L19 7"></path></svg>
            VERIFY <span class="hidden sm:inline">[ACCEPT]</span>
          </button>
          <button class="flex-1 py-3 px-6 bg-gray-500 hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600 text-white rounded-md font-bold text-lg transition-colors duration-200 shadow-lg transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500">
            <svg class="inline-block w-5 h-5 mr-2 -mt-0.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 13v-1m6.7-6.7L7 7m0 0l-3.72 3.72M7 7V4"></path></svg>
            RELOAD <span class="hidden sm:inline">[TRY_AGAIN]</span>
          </button>
        </div>
      </div>
      <p class="text-sm text-gray-500 dark:text-gray-400">// STATUS: Awaiting input from user...</p>
    </div>
    <div class="bg-gray-800 dark:bg-gray-700 p-3 pt-2 text-xs text-gray-400 dark:text-gray-500 flex justify-between items-center">
      <p>@ 2023 INTERACTIVE_DEV.SYS</p>
      <a href="#" class="text-green-500 dark:text-purple-400 hover:underline">help.md</a>
    </div>
  </div>
</div>