验证码组件

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-5">
    <div class="bg-white dark:bg-gray-900 shadow-md rounded-lg p-6 max-w-lg 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 flex-col items-center mb-4">
            <img src="https://picsum.photos/200/100" alt="Random" class="rounded-lg shadow-md mb-3">
            <span class="text-gray-700 dark:text-gray-300">Please select the images with traffic lights.</span>
        </div>
        <div class="grid grid-cols-2 gap-2">
            <img src="https://picsum.photos/200/100?random=1" alt="Option 1" class="cursor-pointer border-2 border-transparent hover:border-blue-500 rounded-lg transition duration-200 ease-in-out">
            <img src="https://picsum.photos/200/100?random=2" alt="Option 2" class="cursor-pointer border-2 border-transparent hover:border-blue-500 rounded-lg transition duration-200 ease-in-out">
            <img src="https://picsum.photos/200/100?random=3" alt="Option 3" class="cursor-pointer border-2 border-transparent hover:border-blue-500 rounded-lg transition duration-200 ease-in-out">
            <img src="https://picsum.photos/200/100?random=4" alt="Option 4" class="cursor-pointer border-2 border-transparent hover:border-blue-500 rounded-lg transition duration-200 ease-in-out">
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200 ease-in-out">Verify</button>
    </div>
</div>