验证码组件

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
  <div class="max-w-lg w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4 text-center">CAPTCHA Verification</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4 text-center">Please verify that you are not a robot by completing the challenge below.</p>
    <div class="flex items-center justify-between mb-4"> 
      <img src="https://picsum.photos/200/100" alt="Captcha Image" class="rounded-lg shadow-md flex-1 mr-2" />
      <input type="text" placeholder="Enter the text above" class="flex-1 border border-gray-300 dark:border-gray-700 rounded-md py-2 px-3 focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400">
    </div>
    <div class="flex flex-col items-center mb-4">
      <p class="text-gray-600 dark:text-gray-400 text-sm">Select the images that match the description:</p>
      <div class="grid grid-cols-2 gap-2 mt-2">
        <img src="https://picsum.photos/100/100?random=1" alt="Image 1" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300">
        <img src="https://picsum.photos/100/100?random=2" alt="Image 2" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300">
        <img src="https://picsum.photos/100/100?random=3" alt="Image 3" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300">
        <img src="https://picsum.photos/100/100?random=4" alt="Image 4" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300">
      </div>
    </div>
    <button type="submit" class="w-full bg-indigo-600 dark:bg-indigo-800 text-white font-semibold py-2 rounded-md hover:bg-indigo-700 dark:hover:bg-indigo-600 transition duration-300">Verify</button>
    <div class="flex items-center justify-between mt-4">
      <p class="text-gray-600 dark:text-gray-400 text-sm">Having trouble? <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Request a new challenge</a></p>
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border border-gray-300 dark:border-gray-700">
    </div>
  </div>
</div>