组件 CAPTCHA 验证码 粗野主义 CAPTCHA 组件

粗野主义 CAPTCHA 组件

一个采用野兽派风格设计的 CAPTCHA 组件,具有高对比度、独特布局以及支持深色主题的响应效果。

预览

HTML 代码

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-5">
    <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-black">
        <h2 class="text-xl font-bold text-black dark:text-white mb-4">Verify You Are Human</h2>
        <div class="flex items-center justify-between mb-4">
            <img src="https://picsum.photos/100/100" alt="Placeholder Image" class="rounded-full border border-black dark:border-white">
            <span class="text-lg font-bold text-black dark:text-white">Are you a robot?</span>
        </div>
        <div class="flex flex-col items-center mb-4">
            <img src="https://picsum.photos/200/100" alt="Random Placeholder" class="w-full rounded-lg border border-black dark:border-white">
            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Select the images that contains a cat.</p>
        </div>
        <div class="flex space-x-4">
            <button class="flex-1 bg-black text-white font-bold py-2 rounded-lg shadow-md hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300 transition">Verify</button>
            <button class="flex-1 bg-red-600 text-white font-bold py-2 rounded-lg shadow-md hover:bg-red-500 dark:bg-red-700 dark:hover:bg-red-600 transition">Cancel</button>
        </div>
    </div>
</div>

相关组件

CAPTCHA 组件 - 水彩/艺术

一个简单、响应式的 CAPTCHA 组件,具有水彩/艺术设计、高对比度配色方案和深色模式支持,适用于制造/工业应用。

打开

Glassmorphism_CAPTCHA_Component_Forest_Green

响应式 glassmorphism 风格的 CAPTCHA 组件,采用森林绿色配色方案,适用于制造/工业应用。包括深色模式支持。

打开

Retro_Captcha_Component

具有海洋/蓝色调的复古/复古风格 CAPTCHA 组件,专为咨询/服务网站设计。具有复杂的界面,带有失真的图像、音频质询和输入字段。

打开