验证码组件

一个简单的验证码组件,采用材料设计原则和柔和的色彩方案,专为商业/企业网站设计.

预览

HTML 代码

<div class="max-w-md mx-auto p-5 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center">CAPTCHA Verification</h2>
    <div class="mt-4 flex flex-col items-center">
        <img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="w-full h-auto rounded-lg shadow">
        <div class="mt-3 flex items-center">
            <label class="text-gray-600 dark:text-gray-400 mr-2" for="captchaInput">Please type the text above:</label>
            <input type="text" id="captchaInput" class="border border-gray-300 rounded-lg p-2 dark:bg-gray-700 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="Enter CAPTCHA">
        </div>
        <button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-600">Verify</button>
    </div>
</div>

相关组件

验证码组件

一个响应式的CAPTCHA组件,受到Material Design的启发,支持暗模式,使用Tailwind CSS。

打开

CAPTCHA 组件

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

打开

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

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

打开