组件 CAPTCHA 验证码 复古/古董 CAPTCHA 组件

复古/古董 CAPTCHA 组件

一个复古风格的验证码组件,专为社交媒体界面设计,具有鲜艳的色彩和复杂的布局,支持响应式设计和深色主题。

预览

HTML 代码

<div class="flex flex-col items-center justify-center p-6 bg-gradient-to-r from-purple-700 to-indigo-600 dark:from-purple-900 dark:to-indigo-800 rounded-lg shadow-lg max-w-md w-full">
    <h2 class="text-white text-2xl font-bold mb-4">Verify You're Human</h2>
    <img src="https://picsum.photos/400/200?random=1" alt="Nostalgic Background" class="rounded-lg mb-4" />
    <div class="flex flex-col items-center text-center mb-4">
        <p class="text-white mb-2">To continue, please solve the puzzle below:</p>
        <div class="flex flex-row space-x-2 bg-white p-2 rounded-lg shadow-md">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-4 border-violet-500 dark:border-violet-300" />
            <p class="text-gray-800 font-semibold">Identify the vintage item:</p>
            <img src="https://picsum.photos/100/100?random=2" alt="Vintage Item" class="w-10 h-10 rounded-lg border-2 border-pink-500 dark:border-pink-300" />
        </div>
    </div>
    <input type="text" placeholder="Your Answer" class="w-full p-2 text-violet-700 dark:text-violet-300 bg-white dark:bg-gray-800 rounded-lg mb-4" />
    <button class="bg-fuchsia-500 hover:bg-fuchsia-600 dark:bg-fuchsia-700 dark:hover:bg-fuchsia-800 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out">Submit</button>
</div>

相关组件

Minimalist Captcha 组件

一个简单、响应迅速且极简的 CAPTCHA 组件,专为仪表板设计,使用单色配色方案并支持深色模式。

打开

粗野主义验证码组件

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

打开

Bauhaus CAPTCHA 组件

用于文档/wiki 网站的简单实用包豪斯风格 CAPTCHA 组件,具有几何形状、高对比度、完全响应和深色模式支持。

打开