组件 CAPTCHA 验证码 Retro Vintage CAPTCHA 组件

Retro Vintage CAPTCHA 组件

一个简单的 CAPTCHA 组件,设计具有怀旧复古美学、充满活力的配色方案,适用于商业和企业网站,并支持深色模式。

预览

HTML 代码

<div class="bg-white dark:bg-gray-800 border border-violet-500 rounded-lg p-6 max-w-sm mx-auto shadow-lg">
    <h2 class="text-center text-2xl font-bold text-violet-600 dark:text-violet-300 mb-4">Prove You Are Human</h2>
    <p class="text-center text-gray-700 dark:text-gray-200 mb-4">Please complete the CAPTCHA below.</p>
    <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="border border-pink-400 rounded-lg">
    </div>
    <div class="flex items-center justify-between">
        <input type="text" placeholder="Enter the text" class="border border-gray-300 dark:border-gray-600 rounded-lg p-2 w-full bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
        <button class="ml-2 bg-violet-600 dark:bg-violet-400 hover:bg-violet-500 dark:hover:bg-violet-300 text-white font-bold py-2 px-4 rounded-lg">Verify</button>
    </div>
    <div class="mt-4 text-center">
        <p class="text-gray-500 dark:text-gray-400 text-sm">Not readable? <a href="#" class="text-violet-600 hover:underline">Try another</a></p>
    </div>
</div>

相关组件

CAPTCHA 组件

受 Material Design 启发的 CAPTCHA 组件,采用单色配色方案,适用于博客或内容网站。具有一个复选框、一个类似 reCAPTCHA 的“我不是机器人”文本和一个占位符图像验证区域。完全响应并支持深色模式。

打开

粗野主义验证码组件

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

打开

CAPTCHA 组件

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

打开