组件 CAPTCHA 验证码 黑暗模式验证码组件

黑暗模式验证码组件

一个为暗模式UI设计的CAPTCHA组件,具有响应式效果和黑暗主题支持。

预览

HTML 代码

<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-lg font-semibold mb-4">Verify You're Human</h2>
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50/50" alt="Random Image" class="w-12 h-12 rounded-full mr-3" />
        <span class="flex-1 text-sm">Please identify the image below:</span>
    </div>
    <div class="mb-4">
        <img src="https://picsum.photos/250/150" alt="CAPTCHA Image" class="w-full h-auto rounded-md" />
    </div>
    <div class="flex space-x-4">
        <button class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Verify</button>
        <button class="bg-gray-500 hover:bg-gray-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Refresh</button>
    </div>
</div>

相关组件

复古 CAPTCHA

一个响应式验证码组件,采用大地色调,适中复杂性,并具有复古/古典风格,适用于商业网站,支持深色模式,使用Tailwind CSS,无需JavaScript。

打开

CAPTCHA 组件 - 有机/自然灵感(秋色)

一个复杂的响应式 CAPTCHA 组件,采用有机的、自然风格的设计,使用秋天的色彩,适用于新闻/新闻网站。包括完整的深色模式支持。

打开

验证码组件

一个3D风格的验证码组件,专为仪表板设计,具有鲜艳的颜色和响应式设计,支持暗模式。

打开