CAPTCHA Component

<div class="flex items-center justify-center min-h-screen bg-gray-900">
    <div class="bg-gray-800 p-8 rounded-lg shadow-lg max-w-sm w-full border border-gray-700">
        <h2 class="text-2xl font-bold text-white mb-6 text-center">Verify you are not a robot</h2>
        <div class="flex items-center justify-between bg-gray-700 p-4 rounded-md mb-6">
            <img src="https://picsum.photos/120/50?grayscale&blur=1" alt="CAPTCHA image" class="rounded">
            <button class="bg-gray-600 text-white p-2 rounded-md hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 16v1m7-11h-1.582a2 2 0 00-1.581 2.946L8 15.5m7-7h2.414.582m-15.356-2A8.001 8.001 0 004 16v1m7-11h-1.582a2 2 0 00-1.581 2.946L8 15.5m7-7h2.414.582"></path></svg>
            </button>
        </div>
        <div class="mb-6">
            <input type="text" placeholder="Enter the text from the image" class="form-input w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-transparent">
        </div>
        <button class="w-full bg-gray-600 text-white p-3 rounded-md font-semibold hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            Submit
        </button>
    </div>
</div>