CAPTCHA 组件

一个简单的 CAPTCHA 组件,采用深色模式灰度设计,针对博客和内容网站的可读性进行了优化。

预览

HTML 代码

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

相关组件

验证码组件

一个使用Tailwind CSS设计的暗模式验证码组件。它是响应式的,并且支持深色主题,无需JavaScript,仅使用CSS。

打开

粗野主义验证码组件

一个具有灰度色彩方案的原始而大胆的验证码组件,适用于仪表板界面,包括用户验证的交互功能。

打开

验证码组件

一个 Material Design 样式的 CAPTCHA 组件,用于增强作品集网站的安全性,具有深色主题和带有 Tailwind CSS 的响应式设计。

打开