验证码组件

一个使用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>

相关组件

复杂的验证码组件

一个复杂的验证码组件,适用于社交媒体应用,支持黑暗模式和鲜艳的颜色。

打开

验证码组件

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

打开

验证码组件

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

打开