验证码组件

<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md max-w-sm w-full">
    <div class="text-center mb-6">
      <h2 class="text-2xl font-serif text-gray-700 dark:text-gray-300 mb-4">Security Check</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400">Please verify you are not a robot.</p>
    </div>

    <div class="mb-6 border-2 border-dashed border-gray-400 dark:border-gray-600 p-4 rounded">
      <p class="text-center text-xl font-mono text-gray-800 dark:text-gray-200 tracking-widest">uGh7fX</p>
    </div>

    <div class="mb-6">
      <label for="captchaInput" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Enter the text above:</label>
      <input type="text" id="captchaInput" name="captchaInput" class="form-input mt-1 block w-full rounded-md border-gray-300 dark:border-gray-700 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
    </div>

    <button type="button" class="w-full bg-gradient-to-r from-pink-400 to-purple-500 hover:from-pink-500 hover:to-purple-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
      Verify
    </button>
  </div>
</div>