复杂的验证码组件

<div class="flex items-center justify-center h-screen bg-gray-900 dark:bg-black p-6">
  <div class="bg-gray-800 dark:bg-gray-900 rounded-lg shadow-xl p-8 w-full max-w-md">
    <h2 class="text-2xl font-bold text-purple-400 mb-6 text-center">CAPTCHA Verification</h2>
    
    <div class="mb-6">
      <label class="block text-yellow-400 text-sm font-semibold mb-2" for="captcha-text">
        Please type the characters you see in the image:
      </label>
      <div class="flex items-center space-x-4">
        <img src="https://picsum.photos/150/60?random=1" alt="CAPTCHA Image" class="rounded">
        <input
          class="shadow appearance-none border border-gray-700 bg-gray-900 dark:bg-gray-800 rounded w-full py-3 px-4 text-teal-400 leading-tight focus:outline-none focus:ring-2 focus:ring-teal-500"
          id="captcha-text"
          type="text"
          placeholder="Enter characters here"
        >
      </div>
    </div>
    
    <div class="mb-6">
      <label class="block text-yellow-400 text-sm font-semibold mb-2" for="captcha-audio">
        Alternatively, listen to the audio and type the numbers:
      </label>
      <div class="flex items-center space-x-4">
        <audio controls class="w-full">
          <source src="your-audio-file.mp3" type="audio/mpeg">
          Your browser does not support the audio element.
        </audio>
      </div>
    </div>

    <div class="mb-6">
        <label class="block text-yellow-400 text-sm font-semibold mb-2" for="captcha-drag-drop">
          Drag and drop the slider to match the image:
        </label>
        <div class="relative w-full h-10 bg-gray-700 rounded-full">
            <div class="absolute top-0 left-0 h-10 w-10 bg-pink-500 rounded-full shadow flex items-center justify-center text-white font-bold cursor-pointer" style="left: 0%;">
                drag
            </div>
            <div class="absolute top-0 right-0 h-10 w-10 bg-purple-500 rounded-full shadow flex items-center justify-center text-white font-bold">
                drop
            </div>
        </div>
    </div>
    
    <div class="flex items-center justify-between">
      <button
        class="bg-teal-500 hover:bg-teal-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out transform hover:-translate-y-1"
        type="button"
      >
        Verify
      </button>
      <button
        class="inline-block align-baseline font-bold text-sm text-purple-400 hover:text-purple-600"
        type="button"
      >
        Cannot see or hear?
      </button>
    </div>
  </div>
</div>