验证码组件

<div class="flex flex-col items-center justify-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Verify You're Human</h2>
    <div class="flex items-center justify-center mb-4">
        <img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="rounded-lg border border-gray-300 dark:border-gray-600" />
    </div>
    <p class="text-gray-600 dark:text-gray-400 mb-4">Please complete the CAPTCHA to prove you are human.</p>
    <div class="flex flex-col space-y-4 w-full">
        <input type="text" placeholder="Enter the characters you see" class="border border-gray-300 dark:border-gray-600 rounded p-2 focus:outline-none focus:ring focus:ring-gray-500 dark:focus:ring-gray-600" />
        <button class="bg-gray-800 text-white rounded p-2 hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Submit</button>
    </div>
    <div class="flex items-center justify-between mt-4 text-sm text-gray-600 dark:text-gray-400">
        <span>Need a new CAPTCHA? <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Refresh</a></span>
        <span>Help? <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Contact Us</a></span>
    </div>
</div>