Glassmorphism CAPTCHA-Komponente

<div class="flex justify-center items-center min-h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 backdrop-blur-md bg-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
        <h2 class="text-center text-gray-800 dark:text-gray-200 text-2xl font-semibold mb-4">Please Verify You Are Human</h2>
        <p class="text-center text-gray-600 dark:text-gray-400 mb-6">To continue with your shopping, please complete the CAPTCHA below.</p>
        <div class="flex justify-center mb-4">
            <img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
        </div>
        <div class="flex justify-center items-center">
            <input type="text" placeholder="Enter text from image" class="border border-gray-300 dark:border-gray-600 rounded-md p-2 w-1/2 bg-transparent text-gray-900 dark:text-gray-100" />
            <button class="ml-2 bg-gray-800 dark:bg-gray-500 text-white rounded-md px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-400">Verify</button>
        </div>
        <div class="flex justify-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-12 h-12 border-2 border-white dark:border-gray-700" />
        </div>
    </div>
</div>