CAPTCHA-Komponente - Brutalismus Lebendig Moderat

<div class="dark:bg-zinc-900 p-6 rounded-lg shadow-xl dark:shadow-none border-4 border-black dark:border-white">
  <h2 class="text-2xl font-bold mb-4 text-black dark:text-white">Verify You Are Not a Robot</h2>
  <div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-4">
    <div id="captcha-image" class="w-full md:w-1/2 h-32 bg-gray-300 dark:bg-zinc-700 flex items-center justify-center text-black dark:text-white text-4xl font-mono border-2 border-black dark:border-white">
      <!-- CAPTCHA image or text will be generated here -->
      <span class="select-none">Aj9pQ</span>
    </div>
    <div class="w-full md:w-1/2">
      <label for="captcha-input" class="block text-sm font-medium text-black dark:text-white mb-2">Enter the text in the image:</label>
      <input type="text" id="captcha-input" class="w-full px-4 py-2 border-2 border-black dark:border-white bg-white dark:bg-zinc-800 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-yellow-500">
    </div>
  </div>
  <button class="mt-6 w-full bg-yellow-500 text-black dark:bg-yellow-600 dark:text-zinc-900 font-bold py-3 px-6 border-4 border-black dark:border-white hover:bg-yellow-600 dark:hover:bg-yellow-500 transition duration-300">
    Submit
  </button>
  <button class="mt-4 w-full text-black dark:text-white font-bold py-3 px-6 border-4 border-black dark:border-white hover:bg-gray-200 dark:hover:bg-zinc-700 transition duration-300">
    Refresh CAPTCHA
  </button>
</div>