Components CAPTCHA Glassmorphism CAPTCHA Component

Glassmorphism CAPTCHA Component

A simple CAPTCHA component with a glassmorphism design style. Ideal for e-commerce websites, featuring a frosted glass-like translucent effect, dark mode support, and a grayscale color scheme.

Preview

HTML Code

<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>

Related Components

CAPTCHA Component - Watercolor/Artistic

A simple, responsive CAPTCHA component with a watercolor/artistic design, high contrast color scheme, and dark mode support, suitable for manufacturing/industrial applications.

Open

Brutalist CAPTCHA Component

A CAPTCHA component designed in a Brutalist style, featuring high contrast, unusual layouts, and responsive effects with dark theme support.

Open

CAPTCHA Component

A CAPTCHA component with a dark mode design using Tailwind CSS. It is responsive and supports dark themes without JavaScript, using only CSS.

Open