验证码组件

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

预览

HTML 代码

<div class="flex items-center justify-center h-screen bg-gray-900">
  <div class="bg-gray-800 p-6 rounded-md shadow-md">
    <h2 class="text-xl font-semibold mb-4 text-white">CAPTCHA Verification</h2>
    <div class="mb-4">
      <img src="https://picsum.photos/200/60?random=1" alt="CAPTCHA Image" class="rounded-md">
    </div>
    <input type="text" class="w-full px-3 py-2 border border-gray-700 rounded-md bg-gray-900 text-white placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Enter CAPTCHA">
    <button class="mt-4 w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Verify</button>
  </div>
</div>

相关组件

验证码组件

Retro/Vintage 风格的响应式 CAPTCHA 组件,具有柔和的配色方案和深色模式支持。

打开

验证码组件

一个简约/扁平化设计的CAPTCHA组件,适合展示作品,响应式,并支持深色模式。

打开

Luxury_Premium_CAPTCHA_Weather_Component

一个复杂的、以奢侈品为主题的 CAPTCHA 组件,适用于天气/气候应用,具有冷色调、精致的排版和响应式设计,支持深色模式。它包括视觉挑战、“当前天气”显示和“气候数据”部分等元素。

打开